How to disable filtering options in material-ui Autocomplete?

Question

I'm using material-ui Autocomplete. When the user changes input, it fetches suggestions from a backend asynchronously. This is part of the code:

const [options, setOptions] = useState([]);

<Autocomplete
  ...
  freeSolo={true}
  options={options}
  renderInput={params => (
    <TextField
      ...
      {...params}
      onChange={async (e) => {
          // get suggestions from backend
          const suggestions = await getSuggestions(e.target.value);

          // update autocomplete options
          setOptions(suggestions);

          ...
      }}
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <React.Fragment>
            {loading ? <CircularProgress color="inherit" size={20} /> : null}
            {params.InputProps.endAdornment}
          </React.Fragment>
        ),
      }}
    />
  )}
/>

The problem is that material-ui Autocomplete doesn't show all of the options that are set using "setOptions". It filters them.

for example: Suppose that the user enters "appl" and getSuggestions returns ["apple", "orange", "potato"]. But It only shows "apple" because it filters out "orange" and "potato".

How can I disable filtering?

Answer 1

The filterOptions method is intended to give you the freedom to decide which options will be available and which will be hidden.

If you just want to show all options - just implement the filterOptions to return all the values:

filterOptions={(options, state) => options}