search

lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
953 stars 77 forks source link

Keyboard navigation is out-of-sync from viewstate #76

Closed matthijsgroen closed 2 years ago

matthijsgroen commented 2 years ago

Describe the bug A clear and concise description of what the bug is.

when opening a folder in the tree using the right-arrow, and then move down, the focus is on the item after the tree item, IF the 'items' of the tree are the same. when the items change as well (for instance items keeping track of expand state as well) then it works fine.

To Reproduce Steps to reproduce the behavior:

  1. visit: https://rct.lukasbach.com/docs/guides/controlled-environment/#managing-the-view-state-of-the-tree
  2. Click 'Desserts' (it should expand immediately)
  3. Press arrow down (focus becomes "Drinks")

Expected behavior A clear and concise description of what you expected to happen.

  1. visit: https://rct.lukasbach.com/docs/guides/controlled-environment/#managing-the-view-state-of-the-tree
  2. Click 'Desserts' (it should expand immediately)
  3. Press arrow down (focus should become "Cookies")

Screenshots If applicable, add screenshots to help explain your problem.

keyboard-bug

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

I could fix this behaviour in my own application by updating the object reference of items whenever the expanded view state changed. I suspect there the keyboard navigation is somehow using an out of date 'linear list' because it only updates when the 'items' change, and not when the 'expandedItems' state changes.

lukasbach commented 2 years ago

Hi @matthijsgroen, thank you for your report! I've fixed the issue, the fix is available in version 1.1.7.

matthijsgroen commented 2 years ago

Hmm that Particular issue is fixed, but now a new issue has risen. when I click in the tree and start keyboard navigation I get index errors.

1.1.6 keyboard-116

with 1.1.7 keyboard-117

lukasbach commented 2 years ago

Hm, that is odd, I'm not getting that in any of the storybook instances. Do you have your project deployed anywhere where it would be possible to reproduce this issue?

matthijsgroen commented 2 years ago
  1. Go to https://geppetto.js.org/app/
  2. Check if version commit is 5a005c.
  3. Press 'Load Demo File'
  4. On the top, Press "Composition"
  5. In the tree to the left, press "Saturation (2)"
  6. Try keyboard navigation
lukasbach commented 2 years ago

Thanks, that really was helpful in debugging, I believe I found the issue now. Please try again with RCT version 1.1.8, I hope this time there are no other problems 😅 Let me know if you have any other issues, and btw your project looks awesome! :)

matthijsgroen commented 2 years ago

It works perfectly now! Thank you! (will update the online build later)