Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown: override default onSearchChange behaviour if prop is passed #1738

Closed
thchia opened this issue Jun 7, 2017 · 1 comment
Closed

Comments

@thchia
Copy link

thchia commented Jun 7, 2017

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.

// ... Line 752, Dropdown.js

if (search && searchQuery) {
  const re = new RegExp(_.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

  1. Override the default options filtering if the onSearchChange prop is passed. Or;
  2. 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) { // OR
if (search && searchQuery && !this.props.overrideDefaultSearch) {

  const re = new RegExp(_.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.
@thchia
Copy link
Author

thchia commented Jun 7, 2017

Self-closing. Totally missed that this is handled by the search prop.

@thchia thchia closed this as completed Jun 7, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant