Skip to content

Commit

Permalink
fix: radix-ui#2375 tooltip rerenders on hover
Browse files Browse the repository at this point in the history
  • Loading branch information
misha-erm committed Nov 3, 2024
1 parent 74b182b commit 394f3a0
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 7 deletions.
5 changes: 5 additions & 0 deletions .yarn/versions/1d095e39.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
releases:
"@radix-ui/react-tooltip": patch

declined:
- primitives
14 changes: 7 additions & 7 deletions packages/react/tooltip/src/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const DEFAULT_DELAY_DURATION = 700;
const TOOLTIP_OPEN = 'tooltip.open';

type TooltipProviderContextValue = {
isOpenDelayed: boolean;
isOpenDelayedRef: React.MutableRefObject<boolean>;
delayDuration: number;
onOpen(): void;
onClose(): void;
Expand Down Expand Up @@ -71,7 +71,7 @@ const TooltipProvider: React.FC<TooltipProviderProps> = (
disableHoverableContent = false,
children,
} = props;
const [isOpenDelayed, setIsOpenDelayed] = React.useState(true);
const isOpenDelayedRef = React.useRef(true);
const isPointerInTransitRef = React.useRef(false);
const skipDelayTimerRef = React.useRef(0);

Expand All @@ -83,16 +83,16 @@ const TooltipProvider: React.FC<TooltipProviderProps> = (
return (
<TooltipProviderContextProvider
scope={__scopeTooltip}
isOpenDelayed={isOpenDelayed}
isOpenDelayedRef={isOpenDelayedRef}
delayDuration={delayDuration}
onOpen={React.useCallback(() => {
window.clearTimeout(skipDelayTimerRef.current);
setIsOpenDelayed(false);
isOpenDelayedRef.current = false;
}, [])}
onClose={React.useCallback(() => {
window.clearTimeout(skipDelayTimerRef.current);
skipDelayTimerRef.current = window.setTimeout(
() => setIsOpenDelayed(true),
() => isOpenDelayedRef.current = true,
skipDelayDuration
);
}, [skipDelayDuration])}
Expand Down Expand Up @@ -229,9 +229,9 @@ const Tooltip: React.FC<TooltipProps> = (props: ScopedProps<TooltipProps>) => {
trigger={trigger}
onTriggerChange={setTrigger}
onTriggerEnter={React.useCallback(() => {
if (providerContext.isOpenDelayed) handleDelayedOpen();
if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
else handleOpen();
}, [providerContext.isOpenDelayed, handleDelayedOpen, handleOpen])}
}, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen])}
onTriggerLeave={React.useCallback(() => {
if (disableHoverableContent) {
handleClose();
Expand Down

0 comments on commit 394f3a0

Please sign in to comment.