react-component / react-component/tree
Do not reset active item, if mouse simply moved
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 490
- Avg merge
- 3d 17h
- Merged PRs (30d)
- 5
Description
Status Quo
Using the keyboard navigation, the tree shows an active active item.
Problem
If the user moves the mouse cursor, the active item is reset.
https://github.com/react-component/tree/blob/62e0bf0b91d86b6e42fee69870ada9a4640b6c6f/src/NodeList.tsx#L360-L362
Use Case
User can select a tree item with mouse cursor, and from there on, continue to use the keyboard navigation.
Please see a sample implementation:
https://codesandbox.io/s/basic-antd-5-0-7-forked-b0nu42?file=/demo.tsx
Hint
Unfortunately, I have to set the focus by hack, to activate the keyboard navigation.
It would be awesome, if tree component supports a interface property, like "focusOnClick".
IMHO, the tree could be focused by default, when clicked. (But not sure about other user's use-cases)
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/NodeList.tsx at lines 360-362 and reproduce the behavior using the linked CodeSandbox example. Trace when mouse movement resets the active item and compare it with selecting an item by mouse; done means a selected item remains active while the user can continue keyboard navigation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100