React-select: Doesn't filter when option label is JSX

[benlieb]

I don't know if this is a bug or a feature, but my options are shaped like this:

  {
    value: payment.id, 
    label: <PaymentSynopsis payment={payment} />
  }

The filtering process doesn't seem to have any effect on this. (I am using an older version and can upgrade if necessary if this would work in a later release.)

Is this possible? I could easily create another option like search_label and just have relevant plain text in there if something like that is baked in.

[benlieb]

nevermind, found filterOption, closing.

[ebonow]

Greetings @benlieb ,

I am not sure which version you are using but the recommended way of doing something like this would be to leverage the formatOptionLabel prop which is used to render the JSX children of the Option and Value components. This would also likely help you decouple your mapping logic from your view logic.

const options = [{ label: payment.searchLabel, value: payment.id, data: payment });
const formatOptionLabel = (option, { context, inputValue, selectValue }) => <PaymentSynopsis payment={option.data} />

return <Select formatOptionLabel={formatOptionLabel />

Hope it works out and let us know if you have any questions.

[benlieb]

@ebonow oh this is very interesting! Thanks for sharing. This kind of reverses the situation, but instead of supplying search logic, I supply the a formated version, and the data needed to create it in the option.

My search ended up being pretty simple:

  filterOption={
    ({data}, input) => data.searchable.includes(input)
  }

Both approaches seem about the same level of work. To be honest, it seems a bit backward to my mind, using label for something that is searchable but not displayed. I'll give this a think, especially the decoupling part.

Cheers!

[ebonow]

@benlieb The filter option is fine but also beware that some of the native search filter things like diacritics and type casing would likely be different than the default filtering. Either way, glad you got it figured out.