Fix SidePanel and Modal issues on Safari (#1498)

* Fix the opening animation of SidePanel and Modal

* Prevent page scroll after the SidePanel or Modal is closed

* Add changeset

.changeset/popular-frogs-explode.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': patch
+---
+
+Fixed opening animation and unwanted page scroll when closing a `SidePanel` or `Modal` on Safari.

packages/circuit-ui/components/Modal/Modal.tsx

@@ -277,6 +277,13 @@ export const Modal: ModalComponent<ModalProps> = ({
           closeTimeoutMS: TRANSITION_DURATION,
           shouldCloseOnOverlayClick: !preventClose,
           shouldCloseOnEsc: !preventClose,
+          /**
+           * react-modal relies on document.activeElement to return focus after the modal is closed.
+           * Safari and Firefox don't set it properly on button click (see https://github.com/reactjs/react-modal/issues/858 and https://github.com/reactjs/react-modal/issues/389).
+           * Returning the focus to document.body or to the focus-root can cause unwanted page scroll.
+           * Preventing scroll on focus would provide better UX for mouse users and shouldn't cause any side effects for assistive technology users.
+           */
+          preventScroll: true,
           ...props,
         };
 

packages/circuit-ui/components/SidePanel/SidePanel.tsx

@@ -161,6 +161,13 @@ export const SidePanel = ({
     htmlOpenClassName: HTML_OPEN_CLASS_NAME,
     onRequestClose: onBack || onClose,
     portalClassName: PORTAL_CLASS_NAME,
+    /**
+     * react-modal relies on document.activeElement to return focus after the modal is closed.
+     * Safari and Firefox don't set it properly on button click (see https://github.com/reactjs/react-modal/issues/858 and https://github.com/reactjs/react-modal/issues/389).
+     * Returning the focus to document.body or to the focus-root can cause unwanted page scroll.
+     * Preventing scroll on focus would provide better UX for mouse users and shouldn't cause any side effects for assistive technology users.
+     */
+    preventScroll: true,
   };
 
   const content = (

packages/circuit-ui/package.json

@@ -42,7 +42,7 @@
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react-dates": "^21.2.0",
-    "react-modal": "^3.8.1",
+    "react-modal": "^3.14.4",
     "react-number-format": "^4.9.1",
     "react-popper": "^2.2.5",
     "use-latest": "^1.2.0",

yarn.lock

@@ -15786,7 +15786,7 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-modal@^3.8.1:
+react-modal@^3.14.4:
   version "3.14.4"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.4.tgz#2ca7e8e9a180955e5c9508c228b73167c1e6f6a3"
   integrity sha512-8surmulejafYCH9wfUmFyj4UfbSJwjcgbS9gf3oOItu4Hwd6ivJyVBETI0yHRhpJKCLZMUtnhzk76wXTsNL6Qg==