Merge pull request #682 from lumapps/chore/update-disable-body-scroll

fix(modal): fix unexpected scroll to top on dialog/lightbox open

Author: gcornut

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 -   Icon: Add missing class to style svg correctly
+-   Dialog/Lightbox: Fix unexpected scroll to top when opening a dialog or lightbox.
 
 ## [1.0.19][] - 2021-07-15
 

packages/lumx-react/package.json

@@ -10,7 +10,7 @@
         "@lumx/core": "^1.0.19",
         "@lumx/icons": "^1.0.19",
         "@popperjs/core": "^2.5.4",
-        "body-scroll-lock": "^2.6.4",
+        "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
         "react-is": "^16.13.0",
         "react-popper": "^2.2.4",

packages/lumx-react/src/hooks/useDisableBodyScroll.ts

@@ -7,7 +7,14 @@ export const useDisableBodyScroll = (modalElement: Element | Falsy): void => {
         if (!modalElement) {
             return undefined;
         }
+        // Fixing the document overflow style to prevent a bug that scrolls the window to the top.
+        const previousDocumentOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'visible';
         disableBodyScroll(modalElement);
-        return () => enableBodyScroll(modalElement);
+        return () => {
+            enableBodyScroll(modalElement);
+            // Restore the previous overflow style.
+            document.documentElement.style.overflow = previousDocumentOverflow;
+        };
     }, [modalElement]);
 };

yarn.lock

@@ -8061,10 +8061,10 @@ [email protected], body-parser@^1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-body-scroll-lock@^2.6.4:
-  version "2.6.4"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.4.tgz#567abc60ef4d656a79156781771398ef40462e94"
-  integrity sha512-NP08WsovlmxEoZP9pdlqrE+AhNaivlTrz9a0FF37BQsnOrpN48eNqivKkE7SYpM9N+YIPjsdVzfLAUQDBm6OQw==
+body-scroll-lock@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec"
+  integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==
 
 bonjour@^3.5.0:
   version "3.5.0"