When using the showSearch and searchLimit properties, the search input will clear itself despite the filter still being applied.
- Create a
ListBox with showSearch={true} and searchLimit={10}, and with more than 10 options.
- Input some filter text into the search area.
- Filter the options externally so that there are fewer than 10 options, and the search area is hidden.
- Undo the filter to restore the search area.
- The search filter is still applied, but the search input is blank.
const options = ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten']
const MyComponent = (): JSX.Element => {
const [filter, setFilter] = useState(false)
const toggleFilter = (): void => { setFilter(!filter) }
return (
<ListBox
showSearch
searchLimit={5}
actions={[<IconButton key='filter' onClick={toggleFilter}><Filter /></IconButton>]}
items={options
.filter((_, index) => !filter || index < 3)
.map(option => ({ name: option, value: option }))}
onChange={() => {}}
/>
)
}
When using the
showSearchandsearchLimitproperties, the search input will clear itself despite the filter still being applied.ListBoxwithshowSearch={true}andsearchLimit={10}, and with more than 10 options.