[Popover] Disable focus management when opened via hover (#855)

mui · Nov 25, 2024 · fde72cf · fde72cf
1 parent 27ab5e4
commit fde72cf
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/packages/react/src/Popover/Popup/PopoverPopup.tsx b/packages/react/src/Popover/Popup/PopoverPopup.tsx
@@ -54,6 +54,7 @@ const PopoverPopup = React.forwardRef(function PopoverPopup(
     descriptionId,
     popupRef,
     mounted,
+    openReason,
   } = usePopoverRootContext();
   const positioner = usePopoverPositionerContext();
 
@@ -91,7 +92,7 @@ const PopoverPopup = React.forwardRef(function PopoverPopup(
     <FloatingFocusManager
       context={positioner.positionerContext}
       modal={false}
-      disabled={!mounted}
+      disabled={!mounted || openReason === 'hover'}
       initialFocus={resolvedInitialFocus}
       returnFocus={finalFocus}
     >

diff --git a/packages/react/src/Popover/Root/PopoverRoot.test.tsx b/packages/react/src/Popover/Root/PopoverRoot.test.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Popover } from '@base-ui-components/react/Popover';
-import { fireEvent, flushMicrotasks, screen, waitFor } from '@mui/internal-test-utils';
+import { act, fireEvent, flushMicrotasks, screen, waitFor } from '@mui/internal-test-utils';
 import userEvent from '@testing-library/user-event';
 import { expect } from 'chai';
 import { spy } from 'sinon';
@@ -333,4 +333,29 @@ describe('<Popover.Root />', () => {
       { timeout: 1500 },
     );
   });
+
+  it('does not move focus to the popover when opened with hover', async () => {
+    await render(
+      <Popover.Root openOnHover delay={0}>
+        <Popover.Trigger>Toggle</Popover.Trigger>
+        <Popover.Positioner>
+          <Popover.Popup>
+            <Popover.Close>Close</Popover.Close>
+          </Popover.Popup>
+        </Popover.Positioner>
+      </Popover.Root>,
+    );
+
+    const toggle = screen.getByRole('button', { name: 'Toggle' });
+
+    act(() => toggle.focus());
+
+    await user.hover(toggle);
+    await flushMicrotasks();
+
+    const close = screen.getByRole('button', { name: 'Close' });
+
+    expect(close).not.to.equal(null);
+    expect(close).not.to.toHaveFocus();
+  });
 });
diff --git a/packages/react/src/Popover/Root/usePopoverRoot.ts b/packages/react/src/Popover/Root/usePopoverRoot.ts
@@ -31,7 +31,6 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo
     open: externalOpen,
     onOpenChange: onOpenChangeProp = () => {},
     defaultOpen = false,
-    keepMounted = false,
     delay,
     closeDelay,
     openOnHover = false,
@@ -69,22 +68,21 @@ export function usePopoverRoot(params: usePopoverRoot.Parameters): usePopoverRoo
     (nextOpen: boolean, event?: Event, reason?: OpenChangeReason) => {
       onOpenChange(nextOpen, event, reason);
       setOpenUnwrapped(nextOpen);
-      if (!keepMounted && !nextOpen) {
+
+      if (!nextOpen) {
         if (animated) {
           runOnceAnimationsFinish(() => {
             if (!openRef.current) {
               setMounted(false);
+              setOpenReason(null);
             }
           });
         } else {
           setMounted(false);
+          setOpenReason(null);
         }
-      }
-
-      if (nextOpen) {
-        setOpenReason(reason ?? null);
       } else {
-        setOpenReason(null);
+        setOpenReason(reason ?? null);
       }
     },
   );
@@ -209,11 +207,6 @@ export namespace usePopoverRoot {
      * @default 0
      */
     closeDelay?: number;
-    /**
-     * Whether the popover popup element stays mounted in the DOM when closed.
-     * @default false
-     */
-    keepMounted?: boolean;
     /**
      * Whether the popover can animate, adding animation-related attributes and allowing for exit
      * animations to play. Useful to disable in tests to remove async behavior.