I want to clear the search text on focusing out of the multi select field By default onBlur is not provided in the package
By default the search value persists on focus out Search term persisting after focusing out of the field
import { Multiselect } from 'multiselect-react-dropdown';
version: "multiselect-react-dropdown": "^2.0.1"
<Multiselect
options={categoryList} // Options to display in the dropdown
displayValue="name" //Label to be displayed from the object
avoidHighlightFirstOption={true}
// closeIcon="cancel"
emptyRecordMsg={"No Product type available"}
selectedValues={multiSelectedCat && multiSelectedCat.length > 0 ? multiSelectedCat : []} // Preselected value to persist in dropdown
onSelect={multiOnSelectCat} // Function will trigger on select event
onRemove={multiOnRemoveCat} // Function will trigger on remove event />
How can I implement the onBlur functionality as it is not provided by default, and I couldn't find much in docs.
The requirement is to clear the search text on Focus out.
You can use the ref call back and combine with blur to update inputValue state in Multiselect.
You can see this example: https://codesandbox.io/s/react-playground-forked-kpgmo?file=/index.js
this.multiselectRef = (element) => {
if (element) {
$("#search_input").blur(function() {
setTimeout(function() {
element.setState({
inputValue: ""
});
}, 1);
});
}
};