MUI Autocomplete – start filtering from 3 character

Question

I have such Autcomplete mui component which make a filter over a list of checkboxes. Popup with options should always stay opened. What I need to do is to trigger filtering only when user input is more than 3 characters.

<Autocomplete
    open
    multiple
    disableCloseOnSelect
    options={permissions as Permission[]}
    getOptionLabel={(option) => option.name}
    disablePortal
    renderTags={() => <div>{`${values.permissions?.length} Selected`}</div>}
    id="combo-box-demo"
    renderInput={(params) => <TextField {...params} label="Permissions" name="search" />}
    ListboxProps={{ style: { maxHeight: '240px' } }}
    renderOption={({ name }) => (
        <Field
            style={{ height: '30px' }}
            as={FormControlLabel}
            name="permissions"
            value={name}
            label={name}
            control={<Checkbox color={'primary'} checked={values.permissions?.includes(name)} />}
        />
    )}
/>

This sounds like pretty simple task but after digging into documentation and googling I haven't found any solution for my particular case (input is uncontrolled and popup should always be in place). Could anyone help with that?

Answer 1

You should use filterOptions with your custom logic for this.

 filterOptions={(options, state) => {
        console.log(options);
        if (state.inputValue.length > 2) {
          return options.filter((item) =>
            String(item.label).toLowerCase().includes(state.inputValue.toLowerCase())
          );
        }
        return options;
      }}

See the working here

You can use any filter logic, I am just checking (case insensitive search) for the input string anywhere in the label.