React-Select: How to maintain search-ability while passing HTML to the label value in options

Question

I have a searchable react-select field where I'm passing HTML into the label value. Searching works prior to adding HTML, but after and understandably, it no longer works. Is there something specific I can do to repair the searchability while passing HTML to the label?

The answer to my original question (can you pass HTML to the label) was answered by this post: react-select escapes html chars

  [
    { value: 'foo', label: <span dangerouslySetInnerHTML={{ __html: 'bar &amp; foo' }} /> },
  ]

Answer 1

If you look at the GitHub code for react-select: https://github.com/JedWatson/react-select/blob/79c9e9deedaa57885d30aa8f19d1892d39e4d236/packages/react-select/src/types.js#L118

You are going to see that label only supports a string. I think you need to use this function formatOptionLabel

<Select
    multi={true}
    options={this.state.options}
    onChange={this.handleOnChange.bind(this)}
    value={this.state.multiValue}
    formatOptionLabel={function(data) {
        return (
            <span dangerouslySetInnerHTML={{ __html: data.label }} />
        );
    }}
    isSearchable={true}
    placeholder="eee"
/>