Material-ui: [TreeView] Locks up preventing mouse & up/down arrows from working

[oisinlavery]

TreeView will often lock up, preventing mouse up/down arrows from working. This happens after it has re-rendered, even if the tree data hasn't changed.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Keyboard controls stop working (sometimes will start working again)
The lockup prevents up / down, left / right still typically work

Console error:

Uncaught TypeError: Cannot read property '0' of undefined
    at getNextNode (VM2322 TreeView.js:129)
    at focusNextNode (VM2322 TreeView.js:180)
    at handleKeyDown (VM2337 TreeItem.js:199)

Expected Behavior 🤔

No errors, keys continues to work

Steps to Reproduce 🕹

screencast: https://imgur.com/vFcXNxS
https://codesandbox.io/s/material-ui-treeview-bug-td9o7

Steps:

1. Open console
2. Use keyboard to move around the tree (rapidly press... up, down, left, right, etc. )
3. It will eventually lock up logging the error I've pasted above

I also suspect this happens more frequently with a more complex label.

Context 🔦

I use TreeItem onFocus to update the URL, this causes re-render of TreeView, which causes errors. It doesn't crash the app but the keyboard does stop responding.

Your Environment 🌎

Reproducible in codesandbox

[oisinlavery]

Exact key press sequence to cause error

1. click first item
2. down, right, up, down
3. down will not respond anymore
4. press left arrow to make it work again

[joshwooding]

Thanks for the report, @eps1lon was experiencing something similar. I can pick this up and look into it at the same time. It wouldn’t surprise me if they are caused by the same thing.

[oisinlavery]

Thanks for looking into this Josh, let me know if you want me to test or troubleshoot.

[joshwooding]

@oisinlavery I don't seem to be able to reproduce this. Can you give me details of your environment? Browser, OS, etc.

[oisinlavery]

I accidentally updated the linked codesandbox example instead of forking it.

Here is a new version which shows the bug:
https://codesandbox.io/s/material-ui-treeview-bug-td9o7

screencast: https://imgur.com/vFcXNxS

I'm on macOS (10.14.6) + latest Chrome (77.0.3865.90)

[joshwooding]

Thanks for the update, looking behind the scenes it seems children aren’t being picked up correctly, I’m still investigating why.

[flurmbo]

@joshwooding I've come across similar issues to this while investigating #17705, have you made any progress?

[joshwooding]

@flurmbo Sadly real life came up but I can look a bit more into it soon. The problem reported by @eps1lon was different, so I need to take a closer look.

[flurmbo]

@joshwooding, no problem. When I investigated @eps1lon's issue I found that when trying to make the TreeView a controlled component that updating the props of the TreeView would force the useEffect hooks dependent on props.children to rerun, which would overwrite the nodeMap. Then when trying to use the keyboard controls I would get similar errors.

[joshwooding]

@flurmbo I noticed that too, the PR I just made should fix that.

[joshwooding]

Can confirm this is fixed in the new release!

[oisinlavery]

Hooray, thanks for fixing this!