fix(component): remove TreeNode focus #801
Conversation
| useEffect(() => { | ||
| if ( | ||
| focusable.focusedNode === id && | ||
| nodeRef.current !== document.activeElement && | ||
| document.activeElement !== document.body | ||
| ) { | ||
| nodeRef.current?.focus(); | ||
| } | ||
| }, [focusable, id]); |
There was a problem hiding this comment.
Hey @RobinOng, this has been brought up before, and in hindsight we probably should have made a test case for it, but the intention of this code is for accessibility purposes. Essentially we need to cover these points:
https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-22
- When a single-select tree receives focus:
- If none of the nodes are selected before the tree receives focus, focus is set on the first node.
- If a node is selected before the tree receives focus, focus is set on the selected node.
- When a multi-select tree receives focus:
- If none of the nodes are selected before the tree receives focus, focus is set on the first node.
- If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.
I know it's pretty annoying, but could we see if we can fix this rather than remove it?
There was a problem hiding this comment.
Sure, I was not aware it's for accessibility
There was a problem hiding this comment.
Hey folks, I have been trying to use this component inside a form and was having this weird issue of the table catching the focus from the entire page all the time, nice that you folks are tracking this.
Do you have any news regarding this? It's an important feature for our business since we are building a product details page to integrate with BigDesign. Thanks in advance!
There was a problem hiding this comment.
@felipesoares6 We are currently working on it
What?
Remove focus for TreeNode
Why?
With the current implementation, TreeNode will snatch the focus of the entire page and it's not possible to use it with other inputs on the page.
Screenshots/Screen Recordings
Before:
https://user-images.githubusercontent.com/22089936/165676627-a1580774-b60d-44fd-9595-b7dc49a4dea7.mov
After:
https://user-images.githubusercontent.com/22089936/165676636-852cd1a3-5164-4e1a-8472-4209971fa01f.mov
Testing/Proof
Attached screen recording