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.

Material-UI Autocomplete set value
Material-UI Autocomplete set value

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.

Code Sandbox

Share this post:

4 thoughts on “How to Set Multiple Values Programmatically in the MUI Autocomplete Component”

  1. Hi, your article has saved me from a huge deadlock! I didn’t recognize that there is the ‘value’ prop in the Autocomplete component! So, I kept trying to manipulate the ‘defaultValue’ prop instead. You brought me out the very important point!
    Hope you have great times and Thank you for sharing this!

    Reply
  2. Hi Jon, I am having difficulty passing data, from an existing record, back to the autocomplete field when trying to edit a form. I am hoping that you can provide some help. The autocomplete field data would be an object with a label and a value …eg {label: Ben, value: 1}

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.