[TreeView] Scroll jump bug

[bumTomica]

When Tree View has a larger height than the window height, clicking Tree Items first jumps the position of the item to the top and then on the second click toggles. See the video, please.

A similar thing happens in the last items too - it just positions the element to the bottom and it is really hard to click it then.

Items in the middle seem fine.

Official doc examples have the same problem.

treeview-scroll-bug.mov

Versions

v5.0.0-alpha.20

[bumTomica]

@oliviertassinari here you go: https://codesandbox.io/s/scroll-jump-bug-24096-forked-o2q9h

Just add some content before the tree, and page needs to have scroll.

[oliviertassinari]

@bumTomica Thanks for reporting the issue. @joshwooding What do you think about this fix?

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
index 742f6663e5..54b960cebf 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -223,7 +223,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
   function handleFocus(event) {
     // DOM focus stays on the tree which manages focus with aria-activedescendant
     if (event.target === event.currentTarget) {
-      ownerDocument(event.target).getElementById(treeId).focus();
+      ownerDocument(event.target).getElementById(treeId).focus({ preventScroll: true });
     }

     const unfocusable = !disabledItemsFocusable && disabled;

[joshwooding]

@bumTomica Thanks for reporting the issue. @joshwooding What do you think about this fix?

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
index 742f6663e5..54b960cebf 100644
--- a/packages/material-ui-lab/src/TreeItem/TreeItem.js
+++ b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -223,7 +223,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
   function handleFocus(event) {
     // DOM focus stays on the tree which manages focus with aria-activedescendant
     if (event.target === event.currentTarget) {
-      ownerDocument(event.target).getElementById(treeId).focus();
+      ownerDocument(event.target).getElementById(treeId).focus({ preventScroll: true });
     }

     const unfocusable = !disabledItemsFocusable && disabled;

Looks good