Highlight match on search

[carantunes]

Most dropdowns that allow searching show matched nodes in bold.
Currently we don't have any class that allows to easily identify the matched nodes on search.

Describe the solution you'd like
I'd like an extra class, is-match or similar, in order to allow customising the css.

Thanks!

[gandhis1]

Try using the CSS selector .react-dropdown-tree-select .dropdown-content .root.searchModeOn .node

[carantunes]

This is a feature request @mrchief.

That selector selects parents as well, even thou matches are on children only.
Eg

[gandhis1]

If you are trying to get leaf nodes, all you need to do is add the leaf class, to get:

.react-dropdown-tree-select .dropdown-content .root.searchModeOn .node.leaf

However if you want either a leaf or non-leaf which matches, that is something that I don't see an obvious way to do.

[carantunes]

Exactly, I'm asking all matches, can be in either leaf or parent or both.
As you already understood that suggestion does not work either.

Can we move this discussion back to feature request? We do need a new class applied to all nodes with are a match as well.

So ideally I could do something similar .react-dropdown-tree-select .dropdown-content .searchModeOn .node.is-match

[mrchief]

I believe searchModeOn was designed with that use case in mind. Going over the discussion, if you want both parents and leaf nodes to match, you can say

.react-dropdown-tree-select .dropdown-content .root.searchModeOn .node,
.react-dropdown-tree-select .dropdown-content .root.searchModeOn .node.leaf {
  // css goes here
}

However, it seems like that is not catering to your needs when you have parent nodes shown in the dropdown? Would you be able to spin up a codesandbox? I'm not terribly opposed to the idea but I'd like to see if we can avoid adding extra logic if possible.

Thanks @gandhis1 for helping out on issues and discussion!