diff --git a/.yarn/versions/4c8bef63.yml b/.yarn/versions/4c8bef63.yml new file mode 100644 index 000000000..03c01858e --- /dev/null +++ b/.yarn/versions/4c8bef63.yml @@ -0,0 +1,5 @@ +releases: + "@radix-ui/react-tooltip": patch + +declined: + - primitives diff --git a/packages/react/tooltip/package.json b/packages/react/tooltip/package.json index 2418f9a20..751f40918 100644 --- a/packages/react/tooltip/package.json +++ b/packages/react/tooltip/package.json @@ -28,8 +28,6 @@ "@radix-ui/react-primitive": "workspace:*", "@radix-ui/react-slot": "workspace:*", "@radix-ui/react-use-controllable-state": "workspace:*", - "@radix-ui/react-use-previous": "workspace:*", - "@radix-ui/react-use-rect": "workspace:*", "@radix-ui/react-visually-hidden": "workspace:*" }, "peerDependencies": { diff --git a/packages/react/tooltip/src/Tooltip.stories.tsx b/packages/react/tooltip/src/Tooltip.stories.tsx index 2320e5d6e..87f755a27 100644 --- a/packages/react/tooltip/src/Tooltip.stories.tsx +++ b/packages/react/tooltip/src/Tooltip.stories.tsx @@ -613,6 +613,43 @@ export const KeepOpenOnActivation = () => { ); }; +export const WithinScrollable = () => ( + +
+
+ + Hover or Focus me + + Nicely done! + + + +
+
+
+ + Hover or Focus me + + Nicely done! + + + +
+
+); + // change order slightly for more pleasing visual const SIDES = SIDE_OPTIONS.filter((side) => side !== 'bottom').concat(['bottom']); diff --git a/packages/react/tooltip/src/Tooltip.tsx b/packages/react/tooltip/src/Tooltip.tsx index d320982ba..16cdc2119 100644 --- a/packages/react/tooltip/src/Tooltip.tsx +++ b/packages/react/tooltip/src/Tooltip.tsx @@ -11,8 +11,6 @@ import { Presence } from '@radix-ui/react-presence'; import { Primitive } from '@radix-ui/react-primitive'; import { Slottable } from '@radix-ui/react-slot'; import { useControllableState } from '@radix-ui/react-use-controllable-state'; -import { usePrevious } from '@radix-ui/react-use-previous'; -import { useRect } from '@radix-ui/react-use-rect'; import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden'; import type * as Radix from '@radix-ui/react-primitive'; @@ -342,15 +340,26 @@ const TooltipContentImpl = React.forwardRef { - // Close this tooltip if another one opens document.addEventListener(TOOLTIP_OPEN, onClose); return () => document.removeEventListener(TOOLTIP_OPEN, onClose); }, [onClose]); + // Close the tooltip if the trigger is scrolled + React.useEffect(() => { + if (context.trigger) { + const handleScroll = (event: Event) => { + const target = event.target as HTMLElement; + if (target?.contains(context.trigger)) onClose(); + }; + window.addEventListener('scroll', handleScroll, { capture: true }); + return () => window.removeEventListener('scroll', handleScroll, { capture: true }); + } + }, [context.trigger, onClose]); + return ( - ) { - const { __scopeTooltip } = props; - const context = useTooltipContext('CheckTriggerMoved', __scopeTooltip); - - const triggerRect = useRect(context.trigger); - const triggerLeft = triggerRect?.left; - const previousTriggerLeft = usePrevious(triggerLeft); - const triggerTop = triggerRect?.top; - const previousTriggerTop = usePrevious(triggerTop); - const handleClose = context.onClose; - - React.useEffect(() => { - // checking if the user has scrolled… - const hasTriggerMoved = - (previousTriggerLeft !== undefined && previousTriggerLeft !== triggerLeft) || - (previousTriggerTop !== undefined && previousTriggerTop !== triggerTop); - - if (hasTriggerMoved) { - handleClose(); - } - }, [handleClose, previousTriggerLeft, previousTriggerTop, triggerLeft, triggerTop]); - - return null; -} - const Provider = TooltipProvider; const Root = Tooltip; const Trigger = TooltipTrigger; diff --git a/yarn.lock b/yarn.lock index dcae3b938..0cb113ad6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4008,8 +4008,6 @@ __metadata: "@radix-ui/react-primitive": "workspace:*" "@radix-ui/react-slot": "workspace:*" "@radix-ui/react-use-controllable-state": "workspace:*" - "@radix-ui/react-use-previous": "workspace:*" - "@radix-ui/react-use-rect": "workspace:*" "@radix-ui/react-visually-hidden": "workspace:*" peerDependencies: react: ^16.8 || ^17.0