diff --git a/.changeset/slow-queens-attend.md b/.changeset/slow-queens-attend.md new file mode 100644 index 0000000000..9b6747cd0a --- /dev/null +++ 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 index 293867c8ee..e193fe3ac3 100644 --- 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 { * @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 index 69658e10ef..5430365f50 100644 --- 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 ( +
+ + + + + + +
+ ); +}; + const OffsetTemplate = (args: TooltipProps) => (
@@ -395,3 +416,10 @@ export const Disabled = { isDisabled: true, }, }; + +export const ShouldBlockScroll = { + render: ShouldBlockScrollTemplate, + args: { + ...defaultProps, + }, +};