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

* fix(navbar): fixed the height when style h-full * fix(navbar): fixed the height when style h-full * docs(changeset): resolved extra file * feat(popover): added control for closing popover on scroll * update(changeset): correction * feat(popover): removed extra story * refactor(test): corrected test for both true and false values of shouldCloseOnScroll * refactor(docs): added shouldCloseOnScroll prop * chore(changeset): change to minor --------- Co-authored-by: աӄա <wingkwong.code@gmail.com>
heroui-inc · Nov 6, 2024 · 01c1916 · 01c1916
1 parent 3d8466c
commit 01c1916
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 2 deletions.
diff --git a/.changeset/slow-paws-punch.md b/.changeset/slow-paws-punch.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/popover": minor
+---
+
+added `shouldCloseOnScroll` to control the popover closing on scroll (#3594)
diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx
@@ -167,7 +167,8 @@ You can customize the `Popover` component by passing custom Tailwind CSS classes
 | showArrow                 | `boolean`                                                                   | Whether the popover should have an arrow.                                                                                                                    | `false`         |
 | shouldFlip                | `boolean`                                                                   | Whether the popover should change its placement and flip when it's about to overflow its boundary area.                                                      | `true`          |
 | triggerScaleOnOpen        | `boolean`                                                                   | Whether the trigger should scale down when the popover is open.                                                                                              | `true`          |
-| shouldBlockScroll         | `boolean`                                                                   | Whether to block scrolling outside the popover.                                                                                                              | `false`         |
+| shouldBlockScroll         | `boolean`                                                                   | Whether the popover should block the scroll outside the popover.                                                                                             | `true`          |
+| shouldCloseOnScroll       | `boolean`                                                                   | Wheather the popover should close on scroll                                                                                                    | `false`         |
 | isKeyboardDismissDisabled | `boolean`                                                                   | Whether pressing the escape key to close the popover should be disabled.                                                                                     | `false`         |
 | shouldCloseOnBlur         | `boolean`                                                                   | Whether the popover should close when focus is lost or moves outside it.                                                                                     | `false`         |
 | motionProps               | [MotionProps](#motion-props)                                                | The props to modify the framer motion animation. Use the `variants` API to create your own animation.                                                        |                 |

diff --git a/packages/components/popover/__tests__/popover.test.tsx b/packages/components/popover/__tests__/popover.test.tsx
@@ -334,3 +334,36 @@ describe("Popover", () => {
     expect(popover).toHaveAttribute("aria-expanded", "false");
   });
 });
+
+it("should close popover on scroll when shouldCloseOnScroll is false", async () => {
+  const wrapper = render(
+    <Popover shouldCloseOnScroll={false}>
+      <PopoverTrigger>
+        <Button data-testid="popover">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <Select data-testid="select" label="Select country">
+          <SelectItem key="argentina">Argentina</SelectItem>
+          <SelectItem key="venezuela">Venezuela</SelectItem>
+          <SelectItem key="brazil">Brazil</SelectItem>
+        </Select>
+      </PopoverContent>
+    </Popover>,
+  );
+
+  const popover = wrapper.getByTestId("popover");
+
+  // open popover
+  await act(async () => {
+    await userEvent.click(popover);
+  });
+
+  // assert that the popover is open
+  expect(popover).toHaveAttribute("aria-expanded", "true");
+
+  // scroll it
+  fireEvent.scroll(document.body);
+
+  // assert that the popover is still open
+  expect(popover).toHaveAttribute("aria-expanded", "true");
+});
diff --git a/packages/components/popover/src/use-aria-popover.ts b/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(() => {

diff --git a/packages/components/popover/src/use-popover.ts b/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,

diff --git a/packages/components/popover/stories/popover.stories.tsx b/packages/components/popover/stories/popover.stories.tsx
@@ -81,6 +81,11 @@ export default {
         type: "boolean",
       },
     },
+    shouldCloseOnScroll: {
+      control: {
+        type: "boolean",
+      },
+    },
     disableAnimation: {
       control: {
         type: "boolean",