fix(modals): prevent unexpected close on blur (#2073)

Author: jzempel

package-lock.json

@@ -22,7 +22,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
-    "@zendeskgarden/container-modal": "^1.0.22",
+    "@zendeskgarden/container-modal": "^1.0.23",
     "@zendeskgarden/container-utilities": "^2.0.4",
     "@zendeskgarden/react-buttons": "^9.12.4",
     "dom-helpers": "^5.1.0",

packages/modals/package.json

@@ -264,24 +264,36 @@ describe('TooltipDialog', () => {
       expect(getByTestId('backdrop')).toHaveAttribute('aria-hidden', 'true');
 
       // Open
-      await user.click(trigger);
+      await act(async () => {
+        await user.click(trigger);
+      });
 
       const openDialog = getByRole('dialog');
-
-      expect(openDialog).not.toBeNull();
-
+      expect(openDialog).toBeInTheDocument();
+      expect(getByTestId('backdrop')).not.toHaveAttribute('aria-hidden');
+      expect(openDialog).toHaveFocus();
       // Backdrop should NOT have hideVisually styles when visible
       const visibleBackdropStyles = window.getComputedStyle(getByTestId('backdrop'));
-
       expect(visibleBackdropStyles.position).toBe('fixed');
 
       // Close (toggle button again)
-      await user.click(trigger);
-
-      const hiddenAgainDialog = queryByRole('dialog', { hidden: true });
+      await act(async () => {
+        await user.click(trigger);
+      });
 
       // Dialog remains mounted but visually hidden again
+      const hiddenAgainDialog = queryByRole('dialog', { hidden: true });
       expect(hiddenAgainDialog).not.toBeNull();
+      await waitFor(() => {
+        expect(getByTestId('backdrop')).toHaveAttribute('aria-hidden', 'true');
+        // Backdrop should have hideVisually styles applied again
+        const hiddenBackdropStyles = window.getComputedStyle(getByTestId('backdrop'));
+        expect(hiddenBackdropStyles.position).toBe('absolute');
+        expect(hiddenBackdropStyles.width).toBe('1px');
+        expect(hiddenBackdropStyles.height).toBe('1px');
+      });
+      // Focus should return to trigger
+      expect(trigger).toHaveFocus();
     });
   });
 });