Issue
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?
Solution
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.
Answered By - kiranvj
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.