"overflow: hidden" is not removed from <body> after <Drawer> closes

Posted 1 month ago

"overflow: hidden" is not removed from <body> after <Drawer> closes #639

Bug report 🐞

Version & Environment

  • Chrome 94 & Firefox 93
  • "@geist-ui/react": "^2.2.0",
  • I am using Next JS but I don't think that is of any relevance.

Expected Behaviour

If I click on a link inside the <Drawer> component, I'll go to another page. Before going to another page the overflow: hidden should be automatically removed from <body> but this does not happen.

Actual results (or Errors)

Because the overflow: hidden persists on the body, the content on the next page is not scrollable and the entire app is now without scroll ability. For me, the content on the next page is stuck outside of the viewport:


It is also causing the infamous update state after unmounting (memory leak) error for me:

react_devtools_backend.js:2526 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1634214302053:9364:23
    at DrawerComponent (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1634214302053:3790:28)
    at http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1634214302053:14348:25
    at div
    at Navigation (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1634214302053:16869:66)
    at div
    at GlobalContainer (http://localhost:3000/_next/static/chunks/pages/index.js?ts=1634214302053:16292:23)
    at Home

This is the main problem (memory leak). As soon as I use the visible props on the drawer, I get this error changing pages.