How to Set Multiple Values Programmatically in the MUI Autocomplete Component

It’s helpful at times to be able to programmatically set values in a component. Often this can be accomplished in a simple manner with useState.

For Autocomplete, it was a bit more complicated and difficult to find. After finally getting it working, I realized there was actually an example straight from the docs of programmatically setting values. It’s how the MUI team created the ‘fixed options‘ demo.

Since it was difficult to find, I decided it was worth writing up and discussing.

Full React code is in the Resources section.

Setting an Array of Values in Autocomplete with useState and onChange

First, create the state variable:

const [autocompleteValues, setAutocompleteValues] = useState([
]);

Second, make sure your Autocomplete component has the following props in the JSX:

<Autocomplete
  multiple
  value={autocompleteValues}
  onChange={handleChange}
  //more props...
/>

Finally, create the handleChange function:

const handleChange = (event, value) => {

  setAutocompleteValues(value);
};

That’s all it takes. However, it’s worth taking a look at what is happening in the onChange handler. Take a look at the below screenshot of dev tools.

The debugger has tripped in the handleChange event after a third item was selected in the autocomplete dropdown. Value has been logged to the console. It is an array that contains both the existing values and also the newest addition. Because of this, you can simply swap out the array of values in the autocompleteValues state reference. Sometimes it can be tricky to deal with useState when it contains an array, but in this case it is easy.

Learn here how to style the MUI Autocomplete Input and Popper.

Setting Multiple Default Values in MUI Autocomplete

If we wanted to set multiple default values in the Autocomplete component, we simply change the initialization of the autocompleteValues:

const [autocompleteValues, setAutocompleteValues] = useState([
  top100Films[11],
  top100Films[12]
]);

In this example I created the array with two values in it. Autocomplete has a defaultValue prop, but when we are using useState and programmatically setting values, we don’t want to use the defaultValue prop. It would simply be immediately overridden by the value prop.

However, if you were using defaultValue prop in a different use case, it can accept either a single value or an array of values. For example, defaultValue={[top100Films[11], top100Films[12]]}.

Here’s how to get and set single values (and default values) in MUI’s Autocomplete.

MUI Autocomplete Fixed Options Demo

Code Sandbox from the docs.

Most demos in the Material-UI docs are demos of props being used. The Fixed Options demo is different because it makes use of React hooks to accomplish something clever with a chip.

There are two primary steps. The first is making sure the state always updates with a constant:

const fixedOptions = [top100Films[6]];
const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);

fixedOptions never gets overridden or wiped out. The onChange handler looks similar.

The second step is to disable any chips that have the same index as any fixed options:

renderTags={(tagValue, getTagProps) =>
  tagValue.map((option, index) => (
    <Chip
      label={option.title}
      {...getTagProps({ index })}
      disabled={fixedOptions.indexOf(option) !== -1}
    />
  ))
}

There was no special prop to set, just a smart use of existing props.

Resources

Here’s a demo on how to use Autocomplete’s getOptionLabel, renderInput, and renderOption.

Here’s how to set and get values in the MUI TextField.

You can use MUI’s ClickAwayListener to create your own Autocomplete.

Code Sandbox