Allow custom highlighting in `ComboboxOptionText` for international users!

[cdroulers]

🚀 Feature request

Current Behavior

<ComboboxOptionText /> highlights search terms, but only if they match according to the default settings of highlight-words-core.

https://github.com/reach/reach-ui/blob/develop/packages/combobox/src/index.tsx#L854

Desired Behavior

It would be great to be able to override the settings of highlight-words-core or completely replace it somehow. In French, I use Accent Insensitive searching in the backend, which returns values like à when looking for a (or vice-versa), which doesn't highlight properly in the Reach Combobox.

Suggested Solution

Allow a prop with extra parameters for highlight-words-core, I guess?

I couldn't find proper documentation on how to override the highlighting, maybe there's currently an easy way. Only one I can see would be to create my own version of ComboxBoxOptionText? But that might be heavy for simple highlight override.

Who does this impact? Who is this for?

Users who work in different languages than English (French, Swedish, Russian, probably lots more!)

Describe alternatives you've considered

Manually rendering the results

Additional context

If this is already supported and I just suck at RTFM, no worries, I'll figure it out!

[indiesquidge]

@cdroulers, you should be able to create your own option text component to highlight as you please with the new useComboboxOptionContext hook. Here is a demo showing it off. The code would look something like this:

// term is passed in as the controlled value of ComboboxInput; see demo above for details
function MyComboboxOptionText({ term }) {
  const { value } = useComboboxOptionContext();

  // results would be replaced with a call to your accent-insensitive search API
  const results = React.useMemo(
    () =>
      findAll({
        searchWords: escapeRegexp(term || "").split(/\s+/),
        textToHighlight: value,
        sanitize: (string) => string.replace(/à/gi, "a")
      }),
    [value, term]
  );

  return (
    <>
      {results.length
        ? results.map((result, index) => {
            const str = value.slice(result.start, result.end);
            return <span key={index}>{str}</span>;
          })
        : value}
    </>
  );
}

Note that useComboboxOptionContext is not yet part of the latest release (v0.12.1 at the time of this comment), but it should be available with the next release.

[jmsv]

@indiesquidge thanks for posting, works nicely in @reach/combobox 0.13.2 🙂