search

chakra-ui / zag

Finite state machines for building accessible design systems and UI components. Works with modern frameworks, and even just Vanilla JS
http://zagjs.com
MIT License
4.11k stars 171 forks source link

Tree View (Beta) selection using keyboard is not working as expected #2028

Open sudhirdhumal289 opened 2 weeks ago

sudhirdhumal289 commented 2 weeks ago

🐛 Bug report

Multi select for tree view works in weird way when operated only with keyboard

💥 Steps to reproduce

  1. Navigate to docs page: https://zagjs.com/components/solid/tree-view
  2. In tree-view mode you can select multiple elements by hitting shift+arrow-keys (up/down)
  3. let say we are selecting from top to down using down arrow
  4. when we select last element using shift + down arrow key and keep hitting shift+down arrow selection gets inverted and it start select/deselect process at first element
  5. Which is ok so far.
  6. after 2nd cycle of invertion last element stays selected
  7. Now if you keep pressing shift+down arrow focus/selection keeps cycling from top to bottom but now random elements stays in selected state

Another issues is CTRL+Up/Down arrow keys are not traversing the tree elements and CTRL+Space is not marking expected elements as selected.

💻 Link to reproduction

https://zagjs.com/components/solid/tree-view

🧐 Expected behavior

Selection and inversion behavior need to be consistent And CTRL+Space is to allow selecting multiple elements in tree view, and CTRL+Arrows to navigate across the elements