Test for on mount calling

mui · Feb 4, 2025 · 0a2f764 · 0a2f764
1 parent 998a31d
commit 0a2f764
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 9 deletions.
diff --git a/packages/react/src/dialog/root/DialogRoot.test.tsx b/packages/react/src/dialog/root/DialogRoot.test.tsx
@@ -874,5 +874,19 @@ describe('<Dialog.Root />', () => {
 
       expect(screen.queryByTestId('popup')).not.to.equal(null);
     });
+
+    it('does not get called on mount when not open', async () => {
+      const onOpenChangeComplete = spy();
+
+      await render(
+        <Dialog.Root onOpenChangeComplete={onOpenChangeComplete}>
+          <Dialog.Portal>
+            <Dialog.Popup data-testid="popup" />
+          </Dialog.Portal>
+        </Dialog.Root>,
+      );
+
+      expect(onOpenChangeComplete.callCount).to.equal(0);
+    });
   });
 });
diff --git a/packages/react/src/menu/root/MenuRoot.test.tsx b/packages/react/src/menu/root/MenuRoot.test.tsx
@@ -1049,6 +1049,22 @@ describe('<Menu.Root />', () => {
 
       expect(screen.queryByTestId('popup')).not.to.equal(null);
     });
+
+    it('does not get called on mount when not open', async () => {
+      const onOpenChangeComplete = spy();
+
+      await render(
+        <Menu.Root onOpenChangeComplete={onOpenChangeComplete}>
+          <Menu.Portal>
+            <Menu.Positioner>
+              <Menu.Popup />
+            </Menu.Positioner>
+          </Menu.Portal>
+        </Menu.Root>,
+      );
+
+      expect(onOpenChangeComplete.callCount).to.equal(0);
+    });
   });
 
   describe('prop: openOnHover', () => {

diff --git a/packages/react/src/popover/root/PopoverRoot.test.tsx b/packages/react/src/popover/root/PopoverRoot.test.tsx
@@ -708,5 +708,21 @@ describe('<Popover.Root />', () => {
 
       expect(screen.queryByTestId('popup')).not.to.equal(null);
     });
+
+    it('does not get called on mount when not open', async () => {
+      const onOpenChangeComplete = spy();
+
+      await render(
+        <Popover.Root onOpenChangeComplete={onOpenChangeComplete}>
+          <Popover.Portal>
+            <Popover.Positioner>
+              <Popover.Popup />
+            </Popover.Positioner>
+          </Popover.Portal>
+        </Popover.Root>,
+      );
+
+      expect(onOpenChangeComplete.callCount).to.equal(0);
+    });
   });
 });
diff --git a/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx b/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
@@ -752,5 +752,21 @@ describe('<PreviewCard.Root />', () => {
 
       expect(screen.queryByTestId('popup')).not.to.equal(null);
     });
+
+    it('does not get called on mount when not open', async () => {
+      const onOpenChangeComplete = spy();
+
+      await render(
+        <PreviewCard.Root onOpenChangeComplete={onOpenChangeComplete}>
+          <PreviewCard.Portal>
+            <PreviewCard.Positioner>
+              <PreviewCard.Popup />
+            </PreviewCard.Positioner>
+          </PreviewCard.Portal>
+        </PreviewCard.Root>,
+      );
+
+      expect(onOpenChangeComplete.callCount).to.equal(0);
+    });
   });
 });
diff --git a/packages/react/src/select/root/SelectRoot.test.tsx b/packages/react/src/select/root/SelectRoot.test.tsx
@@ -603,5 +603,21 @@ describe('<Select.Root />', () => {
 
       expect(screen.queryByRole('listbox')).not.to.equal(null);
     });
+
+    it('does not get called on mount when not open', async () => {
+      const onOpenChangeComplete = spy();
+
+      await render(
+        <Select.Root onOpenChangeComplete={onOpenChangeComplete}>
+          <Select.Portal>
+            <Select.Positioner>
+              <Select.Popup data-testid="popup" />
+            </Select.Positioner>
+          </Select.Portal>
+        </Select.Root>,
+      );
+
+      expect(onOpenChangeComplete.callCount).to.equal(0);
+    });
   });
 });
diff --git a/packages/react/src/tooltip/root/TooltipRoot.test.tsx b/packages/react/src/tooltip/root/TooltipRoot.test.tsx
@@ -651,5 +651,21 @@ describe('<Tooltip.Root />', () => {
 
       expect(screen.queryByTestId('popup')).not.to.equal(null);
     });
+
+    it('does not get called on mount when not open', async () => {
+      const onOpenChangeComplete = spy();
+
+      await render(
+        <Tooltip.Root onOpenChangeComplete={onOpenChangeComplete}>
+          <Tooltip.Portal>
+            <Tooltip.Positioner>
+              <Tooltip.Popup />
+            </Tooltip.Positioner>
+          </Tooltip.Portal>
+        </Tooltip.Root>,
+      );
+
+      expect(onOpenChangeComplete.callCount).to.equal(0);
+    });
   });
 });
diff --git a/packages/react/src/utils/useOpenChangeComplete.tsx b/packages/react/src/utils/useOpenChangeComplete.tsx
@@ -14,16 +14,7 @@ export function useOpenChangeComplete(parameters: useOpenChangeComplete.Paramete
   const onComplete = useEventCallback(onCompleteParam);
   const runOnceAnimationsFinish = useAnimationsFinished(ref, open);
 
-  const hasMountedRef = React.useRef(false);
-
   useEnhancedEffect(() => {
-    if (hasMountedRef.current) {
-      hasMountedRef.current = true;
-      if (!open) {
-        return;
-      }
-    }
-
     runOnceAnimationsFinish(() => {
       if (open === openRef.current) {
         onComplete();