fix(modal): modal position when keyboard appears (#3691)

* feat(theme): add h-[--visual-viewport-height] to modal wrapper * fix(modal): apply --visual-viewport-height * chore(changeset): add changeset
nextui-org · Sep 1, 2024 · 3e06ef6 · 3e06ef6
1 parent 59ea6b7
commit 3e06ef6
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/seven-apricots-happen.md b/.changeset/seven-apricots-happen.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/modal": patch
+"@nextui-org/theme": patch
+---
+
+adjust modal position when keyboard appears (#2837)
diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
@@ -8,7 +8,7 @@ import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils";
 import {CloseIcon} from "@nextui-org/shared-icons";
 import {domAnimation, LazyMotion, m} from "framer-motion";
 import {useDialog} from "@react-aria/dialog";
-import {chain, mergeProps} from "@react-aria/utils";
+import {chain, mergeProps, useViewportSize} from "@react-aria/utils";
 import {HTMLNextUIProps} from "@nextui-org/system";
 import {KeyboardEvent} from "react";
 
@@ -42,6 +42,8 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
 
   const Component = as || DialogComponent || "div";
 
+  const viewport = useViewportSize();
+
   const {dialogProps} = useDialog(
     {
       role,
@@ -97,8 +99,18 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  // set the height dynamically to avoid keyboard covering the bottom modal
+  const viewportStyle = {
+    "--visual-viewport-height": viewport.height + "px",
+  };
+
   const contents = disableAnimation ? (
-    <div className={slots.wrapper({class: classNames?.wrapper})} data-slot="wrapper">
+    <div
+      className={slots.wrapper({class: classNames?.wrapper})}
+      data-slot="wrapper"
+      // @ts-ignore
+      style={viewportStyle}
+    >
       {content}
     </div>
   ) : (
@@ -111,6 +123,8 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
         initial="exit"
         variants={scaleInOut}
         {...motionProps}
+        // @ts-ignore
+        style={viewportStyle}
       >
         {content}
       </m.div>

diff --git a/packages/core/theme/src/components/modal.ts b/packages/core/theme/src/components/modal.ts
@@ -32,6 +32,7 @@ const modal = tv({
       "z-50",
       "overflow-x-auto",
       "justify-center",
+      "h-[--visual-viewport-height]",
     ],
     base: [
       "flex",
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,6 +32,7 @@ const modal = tv({ @@
           "z-50",
           "overflow-x-auto",
           "justify-center",
+          "h-[--visual-viewport-height]",
         ],
         base: [
           "flex",
@@ Expand Down @@