CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
July
July

Reputation: 566

Material-UI Autocomplete warning: use the `getOptionSelected` prop to customize the equality test

I'm using the autocomplete textfield multiple values with options dynamically created. The problem is that I always get the error "None of the options match with ["prova1","prova2","prova3"] You can use the getOptionSelected prop to customize the equality test". What I am missing?

Here is the code:

const top100Films = [ 'prova1','prova2','prova3' ];

const [tags, setTags] = useState([top100Films[0], top100Films[1]]);

<Autocomplete
        multiple
        id="tags-outlined"
        noOptionsText={'Nessuna opzione'}
        options={top100Films}
        onChange={(event, value) => setTags(value)}
        getOptionSelected={(option, value) => option === value.value}
        getOptionLabel={(option) => option}
        defaultValue={[top100Films[0], top100Films[1]]}
        filterOptions={(options, params) => {
          const opt = options.filter(r => tags.filter(x => x === r ).length === 0)
          const filtered = filter(opt, params);
          // Suggest the creation of a new value
          if (params.inputValue !== '' && tags.filter(x => x === params.inputValue).length === 0) {
            filtered.push(params.inputValue)
          }
          return filtered
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="outlined"
            label="Tag"
            placeholder="Inserisci tag"
          />
        )}
      />

Upvotes: 1

Views: 6456

Answers (2)

MintWelsh
MintWelsh

Reputation: 1259

https://next.material-ui.com/guides/migration-v4/

with version 5 of MUI, getOptionSelected has been renamed to isOptionEqualToValue

Upvotes: 2

NearHuscarl
NearHuscarl

Reputation: 81390

getOptionSelected accepts a callback with 2 parameters. Both of which have the option type. Because you're passing this options to your Autocomplete

const top100Films = [ 'prova1','prova2','prova3' ];

The option type is string. This means option and value params are string so change your getOptionSelected to:

getOptionSelected={(option, value) => option === value}

Upvotes: 1

Related Questions