fix(tooltip): add missing shouldBlockScroll logic

nextui-org · Jan 12, 2025 · 845a086 · 845a086
1 parent eada8cb
commit 845a086
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 1 deletion.
diff --git a/.changeset/slow-queens-attend.md b/.changeset/slow-queens-attend.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/tooltip": patch
+---
+
+add missing shouldBlockScroll logic (#3474)
diff --git a/packages/components/tooltip/src/use-tooltip.ts b/packages/components/tooltip/src/use-tooltip.ts
@@ -8,7 +8,12 @@ import {ReactNode, Ref, useId, useImperativeHandle} from "react";
 import {useTooltipTriggerState} from "@react-stately/tooltip";
 import {mergeProps} from "@react-aria/utils";
 import {useTooltip as useReactAriaTooltip, useTooltipTrigger} from "@react-aria/tooltip";
-import {useOverlayPosition, useOverlay, AriaOverlayProps} from "@react-aria/overlays";
+import {
+  useOverlayPosition,
+  useOverlay,
+  AriaOverlayProps,
+  usePreventScroll,
+} from "@react-aria/overlays";
 import {
   HTMLNextUIProps,
   mapPropsVariants,
@@ -63,6 +68,11 @@ interface Props extends Omit<HTMLNextUIProps, "content"> {
    * @default document.body
    */
   portalContainer?: Element;
+  /**
+   * Whether the scroll should be blocked when the tooltip is open.
+   * @default true
+   */
+  shouldBlockScroll?: boolean;
   /**
    * List of dependencies to update the position of the tooltip.
    * @default []
@@ -115,6 +125,7 @@ export function useTooltip(originalProps: UseTooltipProps) {
     crossOffset = 0,
     isDismissable,
     shouldCloseOnBlur = true,
+    shouldBlockScroll = true,
     portalContainer,
     isKeyboardDismissDisabled = false,
     updatePositionDeps = [],
@@ -158,6 +169,10 @@ export function useTooltip(originalProps: UseTooltipProps) {
     createDOMRef(overlayRef),
   );
 
+  usePreventScroll({
+    isDisabled: !(shouldBlockScroll && isOpen),
+  });
+
   const {triggerProps, tooltipProps: triggerTooltipProps} = useTooltipTrigger(
     {
       isDisabled,

diff --git a/packages/components/tooltip/stories/tooltip.stories.tsx b/packages/components/tooltip/stories/tooltip.stories.tsx
@@ -136,6 +136,27 @@ const OpenChangeTemplate = (args: TooltipProps) => {
   );
 };
 
+const ShouldBlockScrollTemplate = (args: TooltipProps) => {
+  return (
+    <div className="flex gap-2">
+      <Tooltip
+        {...args}
+        content="Scrolling outside the tooltip is blocked"
+        shouldBlockScroll={true}
+      >
+        <Button>shouldBlockScroll = true</Button>
+      </Tooltip>
+      <Tooltip
+        {...args}
+        content="Scrolling outside the tooltip is not blocked"
+        shouldBlockScroll={false}
+      >
+        <Button>shouldBlockScroll = false</Button>
+      </Tooltip>
+    </div>
+  );
+};
+
 const OffsetTemplate = (args: TooltipProps) => (
   <div className="flex gap-2">
     <Tooltip {...args} content="Tooltip 1">
@@ -395,3 +416,10 @@ export const Disabled = {
     isDisabled: true,
   },
 };
+
+export const ShouldBlockScroll = {
+  render: ShouldBlockScrollTemplate,
+  args: {
+    ...defaultProps,
+  },
+};