Skip to content

Commit

Permalink
fix(tooltip): regression where hover to open stops working (#1371)
Browse files Browse the repository at this point in the history
  • Loading branch information
stipsan authored Jul 11, 2024
1 parent e4f8a90 commit 038011b
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 12 deletions.
15 changes: 8 additions & 7 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions src/core/primitives/tooltip/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,9 @@ export const Tooltip = forwardRef(function Tooltip(
[childProp?.props, handleIsOpenChange],
)

// Handle closing the tooltip when the mouse leaves the referenceElement
useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})

// Close when `disabled` changes to `true`
useEffect(() => {
if (disabled && showTooltip) handleIsOpenChange(false)
Expand Down Expand Up @@ -298,9 +301,6 @@ export const Tooltip = forwardRef(function Tooltip(
}
}, [handleIsOpenChange, showTooltip])

// Handle closing the tooltip when the mouse leaves the referenceElement
useCloseOnMouseLeave({handleIsOpenChange, referenceElement, showTooltip})

// // Set the max width of the tooltip based on boundaries and portals
useLayoutEffect(() => {
// Get the maximum tooltip width (sans tooltip padding)
Expand Down Expand Up @@ -446,14 +446,16 @@ function useCloseOnMouseLeave({
// Since we don't want the `mouseevent` events to be attached and removed if the `referenceElement` is changed
// we use a "effect event" (https://19.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events)
// in order to always see the latest `referenceElement` value inside the event handler itself.
const onMouseMove = useEffectEvent((target: EventTarget | null) => {
const onMouseMove = useEffectEvent((target: EventTarget | null, teardown: () => void) => {
if (!referenceElement) return

const isHoveringReference =
referenceElement === target || (target instanceof Node && referenceElement.contains(target))

if (!isHoveringReference) {
handleIsOpenChange(false)
// Allow removing the event listener eagerly, to avoid race conditions
teardown()
}
})

Expand All @@ -464,7 +466,7 @@ function useCloseOnMouseLeave({
if (!showTooltip) return

const handleMouseMove = (event: MouseEvent) => {
onMouseMove(event.target)
onMouseMove(event.target, () => window.removeEventListener('mousemove', handleMouseMove))
}

window.addEventListener('mousemove', handleMouseMove)
Expand Down

0 comments on commit 038011b

Please sign in to comment.