reactjs - How to force Material UI Autocomplete to show suggestions after they are loaded?

Question

When using Material UI Autocomplete (https://material-ui.com/components/autocomplete/), an input is created and suggestions are to be displayed:

import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const options = ['Option 1', 'Option 2'];

export default function ControllableStates() {
  ...

  return (
    ...
      <Autocomplete
        onInputChange={(event, newInputValue) => {
          if (newInputValue.length < 3) return;
          // UPDATING OPTIONS
          options.length = 0;
          getNewOptions(newInputValue).forEach((item) => options.push(item)):
        }}
        options={options}
        ...
        renderInput={(params) => <TextField {...params} />}
      />
    ...
  );
}

But what happens actually is that getNewOptions is executed, options are updated, but suggestions list does not display. But when i type 'xyz', and then press backspace suggestion list shows up with data from last getNewOptions execution.

So it seems that when I load data in onInputChange there is some kind of a race condition causing the suggestion list to not show up. How to force suggestions to show up after I update options?

Answer 1

Try using options as a state, and instead of pushing to options, use the 'setState' method to update this value.