How to add multiple creatable to Autocomplete MaterialUI component?

  Kiến thức lập trình

I am following this documentation https://mui.com/material-ui/react-autocomplete/#creatable
but when I add a new push to the filtered variable the first push that is done is duplicated with each word that is typed

The problem is in the pushes, when it is one, it works well, but when it is more than one, it has the fault that it duplicates with each word that is written.

   <FormControl fullWidth>
              <Controller
                name='origin'
                control={control}
                rules={{ required: true }}
                render={({ field: { value, onChange } }) => (
                  <Autocomplete
                    value={value}
                    onChange={async (event, newValue) => {
                      if (typeof newValue === 'string') {
                        setTimeout(async () => {
                          const payload = await createOriginCategory(newValue);
                          onChange(payload);
                        });
                      } else if (
                        newValue?.id === 'create' &&
                        newValue?.inputValue
                      ) {
                        const payload = await createOriginCategory(
                          newValue.inputValue,
                        );
                        onChange({
                          ...payload,
                          inputValue: newValue.inputValue,
                        });
                      } else if (
                        newValue?.id === 'update' &&
                        newValue?.inputValue
                      ) {
                        console.log('update new value', newValue);
                      } else {
                        setOptionValue(newValue);
                        onChange(newValue);
                      }
                    }}
                    filterOptions={(options, params) => {
                      const filtered = filter(options, params);

                      if (params.inputValue !== '') {
                        // this is the duplicate
                        filtered.push({
                          inputValue: params.inputValue,
                          id: 'create',
                          description: `Crear "${params.inputValue}"`,
                        });

                        filtered.push({
                          inputValue: params.inputValue,
                          id: 'update',
                          description: `Configurar "${params.inputValue}"`,
                        });
                      }

                      return filtered;
                    }}
                    id='free-solo-dialog-demo'
                    options={originList}
                    getOptionLabel={(option) => {
                      if (typeof option === 'string') {
                        return option;
                      }
                      if (option.inputValue) {
                        return option.inputValue;
                      }
                      return option.description;
                    }}
                    selectOnFocus
                    clearOnBlur
                    handleHomeEndKeys
                    renderOption={(props, option) => {
                      const { ...optionProps } = props;
                      return (
                        <li key={option.id} {...optionProps}>
                          {option.description}
                        </li>
                      );
                    }}
                    freeSolo
                    renderInput={(params) => (
                      <TextField {...params} label='Origen' />
                    )}
                  />
                )}
              />
            </FormControl>

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website Kho Theme wordpress Kho Theme WP Theme WP

LEAVE A COMMENT