diff --git a/src/components/Tooltip/use-tooltip-events.tsx b/src/components/Tooltip/use-tooltip-events.tsx index 6ef6e833..7dd8792b 100644 --- a/src/components/Tooltip/use-tooltip-events.tsx +++ b/src/components/Tooltip/use-tooltip-events.tsx @@ -357,6 +357,11 @@ const useTooltipEvents = ({ debouncedHandleShowTooltip(resolveAnchorElementRef.current(event.target)) }) } + if (actualOpenEvents.mouseenter || actualOpenEvents.mouseover || actualOpenEvents.focus) { + addDelegatedListener('touchstart', (event) => { + debouncedHandleShowTooltip(resolveAnchorElementRef.current(event.target)) + }) + } if (actualCloseEvents.blur) { addDelegatedListener('focusout', (event) => { const targetAnchor = resolveAnchorElementRef.current(event.target) @@ -470,6 +475,7 @@ const useTooltipEvents = ({ useEffect(() => { const handleScrollResize = () => { handleShowRef.current(false) + clearTimeoutRef(tooltipShowDelayTimerRef) } const tooltipScrollParent = tooltipScrollParentRef.current diff --git a/src/test/tooltip-anchor-selection.spec.js b/src/test/tooltip-anchor-selection.spec.js index 1e8271ea..17056ead 100644 --- a/src/test/tooltip-anchor-selection.spec.js +++ b/src/test/tooltip-anchor-selection.spec.js @@ -63,6 +63,32 @@ describe('tooltip anchor selection', () => { await waitForTooltipToClose('scroll-resize-test') }) + test('reopens on touch after closing from scroll', async () => { + render( + <> + Tap Me + + , + ) + + const anchor = screen.getByText('Tap Me') + + fireEvent.touchStart(anchor) + await waitForTooltip('touch-scroll-test') + + fireEvent.scroll(window) + await waitForTooltipToStopShowing('touch-scroll-test') + + fireEvent.touchStart(anchor) + await waitFor(() => { + expect(document.getElementById('touch-scroll-test')).not.toHaveClass('react-tooltip__closing') + }) + }) + test('unmounts cleanly after opening and closing', async () => { const { unmount } = render( <>