reach/reach-ui

Allow custom highlighting in `ComboboxOptionText` for international users!

Open

#627 opened on Jun 26, 2020

View on GitHub
 (2 comments) (13 reactions) (0 assignees)TypeScript (558 forks)auto 404
Help WantedType: Feature

Repository metrics

Stars
 (5,975 stars)
PR merge metrics
 (PR metrics pending)

Description

🚀 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!

Contributor guide