Merge pull request dubinc#210 from steven-tey/focus-trap-no-scroll

Add no scroll to focus trap
suryatmodulus · May 21, 2023 · 2175cb0 · 2175cb0
2 parents 05d8ecd + d07c952
commit 2175cb0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/app/ui/modal.tsx b/app/ui/modal.tsx
@@ -80,7 +80,15 @@ export default function Modal({
   return (
     <AnimatePresence>
       {(setShowModal ? showModal : true) && (
-        <FocusTrap focusTrapOptions={{ initialFocus: false }}>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onActivate: () => {
+              // prevent scroll outside of modal
+              document.body.style.overflow = "hidden";
+            },
+          }}
+        >
           <div className="absolute">
             <motion.div
               ref={mobileModalRef}

diff --git a/components/shared/modal.tsx b/components/shared/modal.tsx
@@ -77,7 +77,15 @@ export default function Modal({
   return (
     <AnimatePresence>
       {showModal && (
-        <FocusTrap focusTrapOptions={{ initialFocus: false }}>
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onActivate: () => {
+              // prevent scroll outside of modal
+              document.body.style.overflow = "hidden";
+            },
+          }}
+        >
           <div className="absolute">
             <motion.div
               ref={mobileModalRef}