react-component / react-component/tree-select

Allow prop highlightTreeNode to be passed in or match custom filterTreeNode with highlighting

Open
#53 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
312
Forks
204
Avg merge
37m
Merged PRs (30d)
1

Description

If I pass in filterTreeNode, I am able to customize which items are filtered. However, that is different from what is highlighted. I'd like for the highlighting to be consistent with the filtering. The easiest way would be to check if filterTreeNode is defined, and if so, apply highlighting based on that prop, rather than highlighting independently

https://github.com/react-component/tree-select/blob/master/src/SelectTrigger.jsx#L175

For example:
filterTreeNode={(input, child) => { return child.props.value.toLowerCase().indexOf(input.toLowerCase()) > -1}}

I'd expect the highlight function to match:
highlightTreeNode={(input, child) => { return child.props.value.toLowerCase().indexOf(input.toLowerCase()) > -1}}

But since highlightTreeNode is not a valid prop, the highlighting is different

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at src/SelectTrigger.jsx around line 175 and inspect how filterTreeNode and highlighting are applied during search. The change is done when a custom filterTreeNode produces matching highlighting, or an explicit highlightTreeNode prop is supported consistently with the requested behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.