Material-ui Autocomplete - OnChange is blocking other features to work

Question

I am trying to work with the Autocomplete component,

this is my code:

 <Autocomplete
 multiple
 id="checkboxes-tags-demo"
 options={ownerOptions2}
 disableCloseOnSelect
 filterSelectedOptions={true}
 getOptionLabel={(option) => option.title}
 onChange={(event, newValue) => {
 console.log(newValue);
 ** ****props.onSelectionChange(newValue)***** **
 }}
 renderOption={(option, { selected }) => (
 <React.Fragment>
 <Checkbox
 icon={icon}
 checkedIcon={checkedIcon}
 style={{ marginRight: 8 }}
 checked={selected}
 />
 {option.title}
 </React.Fragment>
 )}
 style={{ width: 500 }}
 renderInput={(params) => (
 <TextField {...params} variant="outlined" label="label" placeholder="" />
 )}
 />

Without the "onChange" part, it's working great. But I need to save and do something with the selected values, (is there another way to do it?).

When I'm adding the "onChange" part and run there a function from props, neither the filterSelectedOptions nor the checkbox is working.

What is the right way to do it?

Tnx

• Kay: how did you fix this?

Answer 1

My guess (based on https://material-ui.com/components/autocomplete/#controllable-states ) is that if you specify onChange or value you need to supply both (and therefore handle the state of value yourself).

• igor sharfman: A more specific problem : The onChange does working, but, if iI trying to use a function from props inside it, so the filterSelectedOptions is not working. any ideas?
• Ben Stephens: What does that function do? If it changes the state of the parent component you might need to manage the state of this Autocompomplete from the parent component.