feat(popover): added control for closing popover on scroll

.changeset/slow-paws-punch.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/popover": patch
+---
+
+added `shouldCloseOnScroll` to control the popover closing on scroll (#3594)

packages/components/popover/__tests__/popover.test.tsx

@@ -315,9 +315,9 @@ describe("Popover", () => {
     expect(popover).toHaveAttribute("aria-expanded", "true");
   });
 
-  it("should close popover on scroll", async () => {
+  it("should close popover on scroll when shouldCloseOnScroll is true", async () => {
     const wrapper = render(
-      <Popover>
+      <Popover shouldCloseOnScroll>
         <PopoverTrigger>
           <Button data-testid="popover">Open popover</Button>
         </PopoverTrigger>

packages/components/popover/src/use-aria-popover.ts

@@ -37,6 +37,11 @@ export interface Props {
    * @default []
    */
   updatePositionDeps?: any[];
+  /**
+   * Whether the popover should close on scroll.
+   * @default true
+   */
+  shouldCloseOnScroll?: boolean;
 }
 
 export type ReactAriaPopoverProps = Props & Omit<AriaPopoverProps, "placement"> & AriaOverlayProps;
@@ -60,6 +65,7 @@ export function useReactAriaPopover(
     boundaryElement,
     isDismissable = true,
     shouldCloseOnBlur = true,
+    shouldCloseOnScroll = true,
     placement: placementProp = "top",
     containerPadding,
     shouldCloseOnInteractOutside,
@@ -102,7 +108,7 @@ export function useReactAriaPopover(
     containerPadding,
     placement: toReactAriaPlacement(placementProp),
     offset: showArrow ? offset + 3 : offset,
-    onClose: isNonModal ? state.close : () => {},
+    onClose: isNonModal && shouldCloseOnScroll ? state.close : () => {},
   });
 
   useSafeLayoutEffect(() => {

packages/components/popover/src/use-popover.ts

@@ -118,6 +118,7 @@ export function usePopover(originalProps: UsePopoverProps) {
     boundaryElement,
     isKeyboardDismissDisabled,
     shouldCloseOnInteractOutside,
+    shouldCloseOnScroll,
     motionProps,
     className,
     classNames,
@@ -169,6 +170,7 @@ export function usePopover(originalProps: UsePopoverProps) {
       containerPadding,
       updatePositionDeps,
       isKeyboardDismissDisabled,
+      shouldCloseOnScroll,
       shouldCloseOnInteractOutside,
     },
     state,

packages/components/popover/stories/popover.stories.tsx

@@ -81,6 +81,11 @@ export default {
         type: "boolean",
       },
     },
+    shouldCloseOnScroll: {
+      control: {
+        type: "boolean",
+      },
+    },
     disableAnimation: {
       control: {
         type: "boolean",