MUI Autocomplete, The chip delete button does not work when the value is changed directly in the state

86 Views Asked by At

I have the bellow state:

const [colaboradorSelected, setColaboradorSelected] = React.useState(multiple ? [] : {});

And I have a function to control data selection when an array of registration numbers is inserted into the input, separated by space or ;.

const handleInputChange = async (valor) => {
    toggleLoading();

    let valores = valor.split(/[\s,;]+/);
    if (valores.length > 1 && (validarMatriculaPlansul(valores[0]) || validarMatriculaCaixa(valores[0]))) {
      setEhArray(true)
      console.log('aberto: ', open)
      setOpen(false)
      console.log('valores: ', valores)
      setArrayMatriculas(valores)
    } else {
      setEhArray(false)
    }
    toggleLoading();
  };

The following function records the state after confirming.

const handleInputConfirm = () => {
    let linhas = [];
    arayMatriculas.forEach((valor) => {
      const valorInt = parseInt(valor, 10);
      const linha = colaboradorOptions.find(
        (option) => option.matricula === valorInt
      );
      if (linha) {
        linhas.push(linha);
      }
    });
    console.log('opçoes: ', linhas)
    setColaboradorSelected(colaboradorSelected.concat(linhas));
    setArrayMatriculas([])
  }

Until then, it works, but the generated chips are not interactable until Auto complete receives any type of input.

The component:

<Autocomplete
        open={open}
        autoSelect={false}
        onOpen={() => {
          setOpen(true);
        }}
        onClose={() => {
          setOpen(false);
        }}
        multiple={multiple}
        fullWidth={fullWidth}
        size={size}
        options={colaboradorOptions}
        value={colaboradorSelected}
        onChange={handleColaboradorChange}
        disableCloseOnSelect
        isOptionEqualToValue={(option, value) =>
          option.nome === value.nome ||
          option.matricula === value.matricula ||
          option.login === value.login
        }
        getOptionLabel={(option) =>
          option.matricula + " - " + option.login + " - " + option.nome
        }
        loading={loading}
        noOptionsText={ehArray ? "Buscar matriculas?" : "Nenhum Resultado!"}
        renderOption={(props, option) => {
          return (
            <li {...props} key={option.matricula}>
              {option.nome}
            </li>
          );
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label={label}
            placeholder={placeholder}
            onChange={(event) => handleInputChange(event.target.value)}
            InputProps={{
              ...params.InputProps,
              endAdornment: (
                <React.Fragment>
                  {loading ? (
                    <CircularProgress
                      color="inherit"
                      size={20}
                    />
                  ) : null}
                  {params.InputProps.endAdornment}
                </React.Fragment>
              ),
            }}
            onKeyDown={(event) => {
              if (event.key === "Enter" && ehArray) {
                handleInputConfirm()
              }
            }}
            onBlur={(event) => {
              if (ehArray) {
                handleInputConfirm()
              }
            }}
          />
        )}
        renderTags={(value, getTagProps) => {

          return (
            <>
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'start',
                alignItems: 'start',
                overflowY: 'auto',
                height: 'auto',
                maxHeight: '70px'
              }}>
                {value.map((option, index) => (
                  <Chip
                    {...getTagProps({ index })}
                    size="small"
                    key={index}
                    label={(sohMatricula) ?
                      (caixa ? option.login : option.matricula)
                      :
                      (caixa ? option.login : option.matricula) + ' - ' + option.nome}
                  />
                ))}
              </div>
            </>
          );
        }}
      />

I tried a few things but was unsuccessful.

0

There are 0 best solutions below