From 2f9182384979b17ddea34c44c95a7f8af7883584 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?=
 <wingkwong.code@gmail.com>
Date: Sat, 30 Mar 2024 23:39:27 +0800
Subject: [PATCH 1/3] fix(modal): lazy motion forward ref issue

---
 .../components/modal/src/modal-content.tsx    | 53 ++++++++++++-------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/packages/components/modal/src/modal-content.tsx b/packages/components/modal/src/modal-content.tsx
index d0d12fab8c..53cdf55921 100644
--- a/packages/components/modal/src/modal-content.tsx
+++ b/packages/components/modal/src/modal-content.tsx
@@ -1,7 +1,7 @@
 import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
-import {cloneElement, isValidElement, ReactNode, useMemo} from "react";
+import {cloneElement, isValidElement, ReactNode, useMemo, useCallback, ReactElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
@@ -90,27 +90,42 @@ const ModalContent = forwardRef<"div", ModalContentProps, KeysToOmit>((props, _)
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  const RemoveScrollWrapper = useCallback(
+    ({children}: {children: ReactElement}) => {
+      return (
+        <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
+          {children}
+        </RemoveScroll>
+      );
+    },
+    [shouldBlockScroll, isOpen],
+  );
+
+  const contents = disableAnimation ? (
+    <RemoveScrollWrapper>
+      <div className={slots.wrapper({class: classNames?.wrapper})}>{content}</div>
+    </RemoveScrollWrapper>
+  ) : (
+    <LazyMotion features={domAnimation}>
+      <RemoveScrollWrapper>
+        <m.div
+          animate="enter"
+          className={slots.wrapper({class: classNames?.wrapper})}
+          exit="exit"
+          initial="exit"
+          variants={scaleInOut}
+          {...motionProps}
+        >
+          {content}
+        </m.div>
+      </RemoveScrollWrapper>
+    </LazyMotion>
+  );
+
   return (
     <div tabIndex={-1}>
       {backdropContent}
-      <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-        {disableAnimation ? (
-          <div className={slots.wrapper({class: classNames?.wrapper})}>{content}</div>
-        ) : (
-          <LazyMotion features={domAnimation}>
-            <m.div
-              animate="enter"
-              className={slots.wrapper({class: classNames?.wrapper})}
-              exit="exit"
-              initial="exit"
-              variants={scaleInOut}
-              {...motionProps}
-            >
-              {content}
-            </m.div>
-          </LazyMotion>
-        )}
-      </RemoveScroll>
+      {contents}
     </div>
   );
 });

From e5830b2fcbc578b95b3cbd954c432ab93a2d2006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?=
 <wingkwong.code@gmail.com>
Date: Sat, 30 Mar 2024 23:39:38 +0800
Subject: [PATCH 2/3] fix(popover): lazy motion forward ref issue

---
 .../popover/src/popover-content.tsx           | 55 ++++++++++++-------
 1 file changed, 34 insertions(+), 21 deletions(-)

diff --git a/packages/components/popover/src/popover-content.tsx b/packages/components/popover/src/popover-content.tsx
index 1f607448fd..6f978b709d 100644
--- a/packages/components/popover/src/popover-content.tsx
+++ b/packages/components/popover/src/popover-content.tsx
@@ -1,7 +1,7 @@
 import type {AriaDialogProps} from "@react-aria/dialog";
 import type {HTMLMotionProps} from "framer-motion";
 
-import {DOMAttributes, ReactNode, useMemo, useRef} from "react";
+import {DOMAttributes, ReactNode, useMemo, useRef, useCallback, ReactElement} from "react";
 import {forwardRef} from "@nextui-org/system";
 import {DismissButton} from "@react-aria/overlays";
 import {TRANSITION_VARIANTS} from "@nextui-org/framer-transitions";
@@ -81,29 +81,42 @@ const PopoverContent = forwardRef<"div", PopoverContentProps>((props, _) => {
     );
   }, [backdrop, disableAnimation, getBackdropProps]);
 
+  const RemoveScrollWrapper = useCallback(
+    ({children}: {children: ReactElement}) => {
+      return (
+        <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
+          {children}
+        </RemoveScroll>
+      );
+    },
+    [shouldBlockScroll, isOpen],
+  );
+
+  const contents = disableAnimation ? (
+    <RemoveScrollWrapper>{content}</RemoveScrollWrapper>
+  ) : (
+    <LazyMotion features={domAnimation}>
+      <RemoveScrollWrapper>
+        <m.div
+          animate="enter"
+          exit="exit"
+          initial="initial"
+          style={{
+            ...getTransformOrigins(placement === "center" ? "top" : placement),
+          }}
+          variants={TRANSITION_VARIANTS.scaleSpringOpacity}
+          {...motionProps}
+        >
+          {content}
+        </m.div>
+      </RemoveScrollWrapper>
+    </LazyMotion>
+  );
+
   return (
     <div {...getPopoverProps()}>
       {backdropContent}
-      <RemoveScroll forwardProps enabled={shouldBlockScroll && isOpen} removeScrollBar={false}>
-        {disableAnimation ? (
-          content
-        ) : (
-          <LazyMotion features={domAnimation}>
-            <m.div
-              animate="enter"
-              exit="exit"
-              initial="initial"
-              style={{
-                ...getTransformOrigins(placement === "center" ? "top" : placement),
-              }}
-              variants={TRANSITION_VARIANTS.scaleSpringOpacity}
-              {...motionProps}
-            >
-              {content}
-            </m.div>
-          </LazyMotion>
-        )}
-      </RemoveScroll>
+      {contents}
     </div>
   );
 });

From c3aaec44cb0694cab1d5a0274a8989e976b4fecd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?=
 <wingkwong.code@gmail.com>
Date: Sat, 30 Mar 2024 23:40:03 +0800
Subject: [PATCH 3/3] feat(changeset): fixed lazy motion forwardRef issue

---
 .changeset/spicy-coats-exist.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/spicy-coats-exist.md

diff --git a/.changeset/spicy-coats-exist.md b/.changeset/spicy-coats-exist.md
new file mode 100644
index 0000000000..8559535783
--- /dev/null
+++ b/.changeset/spicy-coats-exist.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/modal": patch
+"@nextui-org/popover": patch
+---
+
+Fixed lazy motion forwardRef issue