I've imported the Autocomplete component from MaterialUI in my React project and using it as a multiple select with checkboxes:

I noticed that when I type into the input to filter the list and then select a value, the filter inserted by the user resets. I want to avoid this and continue to multi-select with the filter instead of reinsert it every time. I didn't find any props in the component API to solve this.

Any suggestion?

That's my component code:

const VirtualAutocomplete = (props) => {
    const classes = useStyles();
    const textClasses = textStyles();

    return (
        <Autocomplete
            id={props.id}
            style={{ width: 'auto' }}
            value={props.value}
            limitTags={4}
            noOptionsText="No records found."
            classes={classes}
            disableCloseOnSelect
            ListboxComponent={ListboxComponent}
            renderGroup={renderGroup}
            onChange={props.onChange}
            options={props.options}
            filterOptions={startsWith}
            multiple={props.multiple}
            renderInput={(params) =>
                <ThemeProvider theme={theme}>
                    <TextField {...params}
                        variant='outlined'
                        classes={{ root: textClasses.formControlRoot }}
                        InputLabelProps={{ classes: { root: textClasses.labelRoot } }}
                        label={props.label}
                    />
                </ThemeProvider>
            }
            renderOption={(option, { selected }) => (
                <Fragment>
                    <Checkbox
                        icon={icon}
                        checkedIcon={checkedIcon}
                        style={{ marginRight: 8 }}
                        checked={selected}
                    />
                    {option}
                </Fragment>
            )}
        />
    );
}

I've imported the Autocomplete component from MaterialUI in my React project and using it as a multiple select with checkboxes: https://material-ui.com/components/autocomplete/#checkboxes

I noticed that when I type into the input to filter the list and then select a value, the filter inserted by the user resets. I want to avoid this and continue to multi-select with the filter instead of reinsert it every time. I didn't find any props in the component API to solve this.

Any suggestion?

That's my component code:

const VirtualAutocomplete = (props) => {
    const classes = useStyles();
    const textClasses = textStyles();

    return (
        <Autocomplete
            id={props.id}
            style={{ width: 'auto' }}
            value={props.value}
            limitTags={4}
            noOptionsText="No records found."
            classes={classes}
            disableCloseOnSelect
            ListboxComponent={ListboxComponent}
            renderGroup={renderGroup}
            onChange={props.onChange}
            options={props.options}
            filterOptions={startsWith}
            multiple={props.multiple}
            renderInput={(params) =>
                <ThemeProvider theme={theme}>
                    <TextField {...params}
                        variant='outlined'
                        classes={{ root: textClasses.formControlRoot }}
                        InputLabelProps={{ classes: { root: textClasses.labelRoot } }}
                        label={props.label}
                    />
                </ThemeProvider>
            }
            renderOption={(option, { selected }) => (
                <Fragment>
                    <Checkbox
                        icon={icon}
                        checkedIcon={checkedIcon}
                        style={{ marginRight: 8 }}
                        checked={selected}
                    />
                    {option}
                </Fragment>
            )}
        />
    );
}

• javascript
• reactjs
• material-ui

• Are you able to reproduce a working example of the issue in codesandbox.io? – 95faf8e76605e973 Commented Sep 12, 2020 at 0:04

3 Answers 3

Create a state that holds input value. Then on TextField onChange pass the function to change this state. Then on Autocomplete pass the props inputValue with that state content. You can also use disableCloseOnSelect props to Autocomplete so options box doesnt close on option selected.

Take a look at their docs about those props https://material-ui.com/pt/api/autocomplete/

Here is a example using their demo: https://codesandbox.io/s/material-demo-forked-pdh81?file=/demo.js:746-766

export const AutocompleteNonClearnableOnSelect = observer((props: AutocompleteProps<any, any, any, any>) => {
    const [value, setValue] = useState("");

    return <Autocomplete {...props}
                         onInputChange={(_, value, reason) => reason !== 'reset' && setValue(value)}
                         inputValue={value}/>;
})

im my case, the solution was re-set state of input value on end of onChange:

<Autocomplete
    ...
    onChange={(event, newValue) => {
        setSelecteds(newValue);
        setInputValue(inputValue);
    }}
/>