React-select: Filter should only consider "label" not "value"

[SimonChris]

The default filtering seems to match the entered text to both the value and label field of the option. This is a problem because the user is shown options whose label does not match the entered text at all.

In my case, "value" is the database id, while the label displays an account number. When users search for an account, they are shown unrelated accounts whose database ID's happen to include the entered account number. I know I can fix this with a custom filter, but it really should be the default

Please change the behavior so that search only considers the label.

[SimonChris]

https://github.com/JedWatson/react-select/issues/2007

So, it seems like this is the intended behavior, but why? Surely, the user expects the search to only apply to the visible label?

[wmgregory]

I agree, for the purpose of UX, the user expects to filter the label only as default.

Probably a better way

export const filterOption = (option: OptionType, inputValue: string): boolean =>
  (option.label.toString().match(inputValue) || []).length > 0;

<Select
  {...this.props}
  filterOption={filterOption}
  options={options}
 />

[VadSiam]

I solved this problem with filterOptions:

<Select
  {...this.props}
  filterOption={createFilter({
    matchFrom: 'any',
    stringify: option => `${option.label}`,
  })}
  options={options}
/>

[thadeu]

@VadSiam this solution resolve for me, but will be better have an boolean in the props..
thanks for the solution

[rahul-desai3]

For UX reasons, I believe this should be a bug. Having a default of filter by label only makes more sense to me.
Thanks for the workarounds.