From 4741a8470c36ca051605c97745561ced159c96cc Mon Sep 17 00:00:00 2001
From: Anuj Sharma <anuj21.nitt@gmail.com>
Date: Wed, 16 Oct 2024 17:46:01 +0530
Subject: [PATCH] fix: onOpenChange triggering when modal opens

---
 .changeset/early-ghosts-fix.md             |  7 +++++++
 packages/components/modal/src/use-modal.ts |  8 +++++++-
 packages/hooks/use-disclosure/src/index.ts | 11 +++++++----
 3 files changed, 21 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/early-ghosts-fix.md

diff --git a/.changeset/early-ghosts-fix.md b/.changeset/early-ghosts-fix.md
new file mode 100644
index 0000000000..6ce0af54c6
--- /dev/null
+++ b/.changeset/early-ghosts-fix.md
@@ -0,0 +1,7 @@
+---
+"@nextui-org/modal": minor
+"@nextui-org/use-disclosure": minor
+---
+
+Added useEffect in useModal to fire onOpenChange when onOpen changes to true.
+In useDisclosure, onOpenChange now depends on arg onOpen, than state(onOpen).
diff --git a/packages/components/modal/src/use-modal.ts b/packages/components/modal/src/use-modal.ts
index 66b6f7be63..931ce36076 100644
--- a/packages/components/modal/src/use-modal.ts
+++ b/packages/components/modal/src/use-modal.ts
@@ -3,7 +3,7 @@ import type {HTMLMotionProps} from "framer-motion";
 
 import {AriaModalOverlayProps} from "@react-aria/overlays";
 import {useAriaModalOverlay} from "@nextui-org/use-aria-modal-overlay";
-import {useCallback, useId, useRef, useState, useMemo, ReactNode} from "react";
+import {useCallback, useId, useRef, useState, useMemo, ReactNode, useEffect} from "react";
 import {modal} from "@nextui-org/theme";
 import {
   HTMLNextUIProps,
@@ -129,6 +129,12 @@ export function useModal(originalProps: UseModalProps) {
     },
   });
 
+  useEffect(() => {
+    if (isOpen) {
+      onOpenChange?.(isOpen);
+    }
+  }, [isOpen]);
+
   const {modalProps, underlayProps} = useAriaModalOverlay(
     {
       isDismissable,
diff --git a/packages/hooks/use-disclosure/src/index.ts b/packages/hooks/use-disclosure/src/index.ts
index c5bccc11df..91675e52e2 100644
--- a/packages/hooks/use-disclosure/src/index.ts
+++ b/packages/hooks/use-disclosure/src/index.ts
@@ -44,11 +44,14 @@ export function useDisclosure(props: UseDisclosureProps = {}) {
     onOpenPropCallbackRef?.();
   }, [isControlled, onOpenPropCallbackRef]);
 
-  const onOpenChange = useCallback(() => {
-    const action = isOpen ? onClose : onOpen;
+  const onOpenChange = useCallback(
+    (isOpen: boolean) => {
+      const action = isOpen ? onOpen : onClose;
 
-    action();
-  }, [isOpen, onOpen, onClose]);
+      action();
+    },
+    [isOpen, onOpen, onClose],
+  );
 
   return {
     isOpen: !!isOpen,