[docs] When clicking on the left drawer, ancre doesn't stay on the click

[paulo60pg]

The drawer seems to always go back to the top after each click.

I would expect the same behavior as V4 documentation.

[oliviertassinari]

What's the issue?

[paulo60pg]

The left drawer doesn't stay where the click is made. Which creates confusion on where we are in the doc.

Please find a video below :

material-ui.mov

[oliviertassinari]

It looks like a regression from #24418

[oliviertassinari]

It looks like a regression from #24418

Actually no. I could pinpoint the origin. It's about #25416. It's a breaking change between React 16 and React 17, introduced in facebook/react#17925. @dtassone one example of why the sooner we run the data grid in React 17 the better :).

@paulo60pg we can restore the previous behavior with a simple change:

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 267ab9512e..da51364794 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -22,7 +22,7 @@ function PersistScroll(props) {
   const { children, enabled } = props;
   const rootRef = React.useRef();

-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const parent = rootRef.current ? rootRef.current.parentElement : null;
     const activeElement = parent.querySelector('.app-drawer-active');

Would you like to work on a pull request? :)

[oliviertassinari]

On a different note. The scroll experience on mobile is horrible. it drove me crazy for the last 2 years. I would propose we fix it with:

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 267ab9512e..8cf065f1af 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -22,7 +22,7 @@ function PersistScroll(props) {
   const { children, enabled } = props;
   const rootRef = React.useRef();

-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const parent = rootRef.current ? rootRef.current.parentElement : null;
     const activeElement = parent.querySelector('.app-drawer-active');

@@ -30,13 +30,12 @@ function PersistScroll(props) {
       return undefined;
     }

+    parent.scrollTop = savedScrollTop;
+
     const activeBox = activeElement.getBoundingClientRect();

-    if (savedScrollTop === null || activeBox.top - savedScrollTop < 0) {
-      // Center the selected item in the list container.
-      activeElement.scrollIntoView();
-    } else {
-      parent.scrollTop = savedScrollTop;
+    if (activeBox.top < 0 || activeBox.top > window.innerHeight) {
+      parent.scrollTop += activeBox.top - 8 - 32;
     }

     return () => {
@@ -200,10 +199,10 @@ function AppNavDrawer(props) {
             keepMounted: true,
           }}
         >
-          {drawer}
+          <PersistScroll enabled={mobileOpen}>{drawer}</PersistScroll>
         </SwipeableDrawer>
       ) : null}
-      {disablePermanent ? null : (
+      {disablePermanent || mobile ? null : (
         <Hidden lgDown implementation="css">
           <Drawer
             classes={{
@@ -212,7 +211,7 @@ function AppNavDrawer(props) {
             variant="permanent"
             open
           >
-            <PersistScroll enabled={!mobile}>{drawer}</PersistScroll>
+            <PersistScroll enabled>{drawer}</PersistScroll>
           </Drawer>
         </Hidden>
       )}