You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When typing input into the searchable Dropdown, the component filters the options by matching the input value against the text prop in the options.
// ... Line 752, Dropdown.jsif(search&&searchQuery){constre=newRegExp(_.escapeRegExp(searchQuery),'i')filteredOptions=_.filter(filteredOptions,(opt)=>re.test(opt.text))}// ...
I am building my options from a list of complex objects. I have a need to search over this list by several properties (I cannot do this any earlier in the data flow). In order to achieve this, I pass a custom function to onSearchChange that does the appropriate regex filtering on my data source, before returning the matching results as options to Dropdown ([{ text: <string>, value: <string>}]).
Everything works up to here, but the Dropdown does not show my options because it is performing an additional option filtering (see above), attempting to match the search input to the text property on the options array.
Desired Behaviour
Override the default options filtering if the onSearchChange prop is passed. Or;
Add another prop to indicate whether the default behaviour should be overridden.
// ... Line 752, Dropdown.js// if (search && searchQuery) {if(search&&searchQuery&&!this.props.onSearchChange){// ORif(search&&searchQuery&&!this.props.overrideDefaultSearch){constre=newRegExp(_.escapeRegExp(searchQuery),'i')filteredOptions=_.filter(filteredOptions,(opt)=>re.test(opt.text))}// ...
Considerations
I am personally more in favour of option 1 because it eliminates the possibility of someone overriding the default behaviour without supplying a function to replace it.
I hope this suggestion maintains the spirit of the Dropdown component - FYI I considered using the Search component instead, but that faces a similar problem of filtering by the title property of the options.
The text was updated successfully, but these errors were encountered:
Current Behaviour
When typing input into the searchable Dropdown, the component filters the options by matching the input value against the
text
prop in the options.I am building my options from a list of complex objects. I have a need to search over this list by several properties (I cannot do this any earlier in the data flow). In order to achieve this, I pass a custom function to
onSearchChange
that does the appropriate regex filtering on my data source, before returning the matching results as options to Dropdown ([{ text: <string>, value: <string>}]
).Everything works up to here, but the Dropdown does not show my options because it is performing an additional option filtering (see above), attempting to match the search input to the
text
property on the options array.Desired Behaviour
onSearchChange
prop is passed. Or;Considerations
title
property of the options.The text was updated successfully, but these errors were encountered: