[combobox]: how to style matching text segments differently?

[stefanprobst]

the reach-ui combobox allows styling the matching/unmatching segments of listbox options differently - e.g. typing Ice in the combobox input would allow highlighting <b>Ice</b> Cream and M<b>ice</b>.

is something like this possible with rsp combobox?

[LFDanLu]

@stefanprobst We don't support something like that out of the box, and it would be difficult to do due to the caching behavior of our collection components + the assumption that each item passed to the collection is immutable. Perhaps it can be done if you do an Array map instead of passing the items directly to the ComboBox, and you modify this array of items every time the input value changes so that the text value has the <b> applied to correct places.

[devongovett]

Here's an example: https://codesandbox.io/s/autumn-leaf-mg3rn?file=/src/App.js

Note that like Daniel mentioned, we can't use the items prop with the render function because this caches the result of rendering each item. In this case you'll need to use an array map of children. It likely won't perform as well with long lists, but hopefully while searching the list should be fairly small anyway.

[stefanprobst]

awesome, working great - thanks to both of you!