0

Even when I use filterSelectedOptions prop in my utocomplete, it only works when there's a pre defined chip used: image1

but when is a brand new typed option, it duplicates it multiple times: image2

I'm trying to used filterOptions, but it's not working and i don't hace clear how to do it :( this is my current code:

 const handleAutocomplete = (e, valueTags) => {
    e.preventDefault();
    const tagIdsArray = [];
    valueTags.forEach((valueTag) => {
      tagIdsArray.push(Number(tags.filter(tag => valueTag.title === tag.title).shift().id));
    });
    const tagIds = [...new Set(tagIdsArray)];
    handleTag(tagIds);
  };
  return (
    <Autocomplete
      multiple
      options={tags}
      getOptionLabel={option => option.title}
      defaultValue={tagDafaultIds}
      filterSelectedOptions
      onChange={handleAutocomplete}
      // filterOptions={(options) => {
      //   options.filter(option => option.title);
      //   return options;
      // }}
      // filterOptions={(options) => {
      //   const tagsOptions = [...new Set(options)];
      //   return tagsOptions;
      // }}
      renderInput={params => (
        <TextField
          {...params}
          variant="outlined"
          label="Tags"
          placeholder="Select multiple tags"
          margin="normal"
          fullWidth
        />
      )}
    />
  );
};

thanks

1 Answer 1

1

If any one has the same trouble, I corrected it using the prop VALUE of MUI instead of default Value.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.