MaterialUI Autocomplete - Avoid clearing input text filter when option is selected

Viewed 1513

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>
            )}
        />
    );
}
1 Answers
Related