From 209b35bfcf8ae36256240c1a7ac23940cc7d644c Mon Sep 17 00:00:00 2001 From: Hristiyan Dimitrov Date: Tue, 5 Apr 2022 10:07:35 +0300 Subject: [PATCH] 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 | 5 +++++ packages/circuit-ui/components/Modal/Modal.tsx | 7 +++++++ packages/circuit-ui/components/SidePanel/SidePanel.tsx | 7 +++++++ packages/circuit-ui/package.json | 2 +- yarn.lock | 2 +- 5 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 .changeset/popular-frogs-explode.md diff --git a/.changeset/popular-frogs-explode.md b/.changeset/popular-frogs-explode.md new file mode 100644 index 0000000000..a41faeeb1d --- /dev/null +++ b/.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. diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx index 5c42f986d9..d550ab72ce 100644 --- a/packages/circuit-ui/components/Modal/Modal.tsx +++ b/packages/circuit-ui/components/Modal/Modal.tsx @@ -277,6 +277,13 @@ export const Modal: ModalComponent = ({ 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, }; diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.tsx index b22d6ca26d..f211df9915 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanel.tsx +++ b/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 = ( diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 8f5218b360..d3e2a240d6 100644 --- a/packages/circuit-ui/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index a2e1013662..b72f16bb7e 100644 --- a/yarn.lock +++ b/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==