fix: controlled popover open on focus (#2825)

Author: dawid-klosowski-at-brainly

src/components/popover/Popover.tsx

@@ -40,14 +40,22 @@ export type PopoverPropsType = {
 
   /**
    * Determine if hover should affect popover visibility.
+   * @default true
    */
   useHover?: boolean;
 
   /**
    * Determine if click should affect popover visibility.
+   * @default true
    */
   useClick?: boolean;
 
+  /**
+   * Determine if focus should affect popover visibility.
+   * @default true
+   */
+  useFocus?: boolean;
+
   /**
    * Only controlled component. Handle Popover open state change.
    */
@@ -63,6 +71,7 @@ const Popover = ({
   id,
   useHover,
   useClick,
+  useFocus,
   defaultOpen = false,
   open,
   role,
@@ -76,6 +85,7 @@ const Popover = ({
     onOpenChange,
     useHover,
     useClick,
+    useFocus,
     role,
   });
 

src/components/popover/usePopover.ts

@@ -6,7 +6,7 @@ import {
   useClick as useFloatingClick,
   useHover as useFloatingHover,
   useRole,
-  useFocus,
+  useFocus as useFloatingFocus,
   offset,
   flip,
   arrow,
@@ -29,6 +29,7 @@ interface UsePopoverPropTypes {
   open?: boolean;
   useHover?: boolean;
   useClick?: boolean;
+  useFocus?: boolean;
   role?: PopoverRole;
   onOpenChange?: (arg0: boolean) => void;
 }
@@ -40,6 +41,7 @@ const usePopover = ({
   open,
   useHover = true,
   useClick = true,
+  useFocus = true,
   role = 'dialog',
   onOpenChange,
 }: UsePopoverPropTypes) => {
@@ -130,7 +132,9 @@ const usePopover = ({
       blockPointerEvents: true,
     }),
   });
-  const focus = useFocus(data.context);
+  const focus = useFloatingFocus(data.context, {
+    enabled: useFocus,
+  });
   const click = useFloatingClick(data.context, {
     enabled: useClick,
   });