Drawer issues with lazy loaded components

[alessandrotilli]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/mui-drawer-with-lazy-components-yyg5n0

Steps:

1. click the button in the page to open the drawer
2. click a link in drawer to change route
3. sometimes the drawer won't close anymore

Current behavior 😯

Sometimes the Drawer seems to ignore the open prop and stays opened even if set to false.

Expected behavior 🤔

The Drawer should close if the open prop equals true

Context 🔦

We use the drawer as a sidebar navigation, each children is a react router <Link> pointing to a dedicated <Route> which will render a React.lazy loaded component.

The issues is not present using standard component imports.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: macOS 13.3
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.121
    Edge: Not Found
    Firefox: 107.0
    Safari: 16.4

[mj12albert]

I can reproduce this, though I wonder if it can be reproed without react router 🤔

[alessandrotilli]

I can reproduce this, though I wonder if it can be reproed without react router 🤔

Hello @mj12albert , I updated the sandbox removing react-router, the problem is still present

[The-Professor99]

This also seems to be the case for Menu in the same context as described above.

[jim-moody]

Any update on this? We are attempting to implement lazy loading in our application and this bug is preventing us from making that change.

[serjiosilent]

The same issue.

Using:
"react": "18.2.0",
"react-router-dom": "6.10.0",
"@mui/material": "5.11.14"

[jmca]

This might be related to a Suspense/Lazy issue in React:

• Bug: useInsertionEffect() cleanup function does not fire if a component is wrapped in React.lazy facebook/react#26670
• Given Emotion's Global component is used in a component that is lazy loaded and wrapped in Suspense, and the parent component is rendered upon initial page load, the global styles are not removed when that component is unmounted emotion-js/emotion#3038 (EmotionJS)

[PandasProperty]

+1 here :(

[PandasProperty]

My fix was like this: when clicking an item to not do closeMenu() and navigate(path) in the same render. (you can put one of them in a setTimeout with a small time, but I didn't went like this.)

My solution was:
when clicking to navigate to the desired path (if the path is the current pathname just close the menu).
an effect listening for changes in the pathname that closes the drawer.

const location = useLocation();
 const { pathname } = location;

useEffect(() => {
   closeMenu();
 }, [pathname]);

 const onSelectItem = (path: string) => {
     if (path === pathname) {
       closeMenu();
       return;
     }
     navigate(path);
};

[owenashurst]

I'm experiencing an issue when routing to another page, the drawer closes, but the backdrop remains. If I click twice, it disappears and I don't see the behaviour again unless I do a full page refresh.

[alirezavafaee]

This works fine.
You can use a lower value for the setTimeout but 300 ms is safe for low speed loading.

  const navigate = useNavigate();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  
  const handleClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  }, []);

  const handleClose = useCallback((url?: string) => {
    setAnchorEl(null);
    if (url) setTimeout(() => navigate(url), 300);
  }, []);

<IconButton
    aria-haspopup='true'
    aria-expanded={open ? 'true' : undefined}
    onClick={handleClick}
    color='inherit'
>
    <AccountCircle />
</IconButton>
<Menu
    anchorEl={anchorEl}
    open={open}
    onClose={() => handleClose()}
    anchorOrigin={{
        vertical: 'bottom',
        horizontal: 'center',
    }}
    transformOrigin={{
        vertical: 'top',
        horizontal: 'center',
    }}
>
    <MenuItem onClick={() => handleClose('/profile')}>
        <ListItemIcon>
        <Person fontSize='small' />
        </ListItemIcon>
        <T>Profile</T>
    </MenuItem>
    <Divider variant='middle' />
    <MenuItem onClick={() => handleClose('/logout')}>
        <ListItemIcon>
        <Logout fontSize='small' />
        </ListItemIcon>
        <T>Logout</T>
    </MenuItem>

</Menu>