[tooltip] Cancel pending open on pointerdown

Author: atomiks

packages/react/src/floating-ui-react/hooks/useHoverReferenceInteraction.ts

@@ -439,12 +439,6 @@ export function useHoverReferenceInteraction(
         function handleMouseMove() {
           instance.restTimeoutPending = false;
 
-          // A delayed hover open should not override a click-like open that happened
-          // while the hover delay was pending.
-          if (isClickLikeOpenEvent()) {
-            return;
-          }
-
           const latestOpen = store.select('open');
 
           if (!instance.blockMouseMove && (!latestOpen || isOverInactive) && checkShouldOpen()) {
@@ -467,14 +461,5 @@ export function useHoverReferenceInteraction(
         }
       },
     };
-  }, [
-    enabled,
-    instance,
-    isClickLikeOpenEvent,
-    isOverInactiveTrigger,
-    mouseOnly,
-    store,
-    restMsRef,
-    checkShouldOpen,
-  ]);
+  }, [enabled, instance, isOverInactiveTrigger, mouseOnly, store, restMsRef, checkShouldOpen]);
 }

packages/react/src/tooltip/root/TooltipRoot.test.tsx

@@ -821,6 +821,25 @@ describe('<Tooltip.Root />', () => {
         expect(screen.queryByText('Content')).toBe(null);
       });
 
+      it('should not open when the trigger receives pointerdown before delay duration', async () => {
+        await render(<TestTooltip />);
+
+        const trigger = screen.getByRole('button', { name: 'Toggle' });
+
+        fireEvent.mouseEnter(trigger);
+        fireEvent.mouseMove(trigger);
+
+        clock.tick(OPEN_DELAY / 2);
+
+        fireEvent.pointerDown(trigger, { pointerType: 'mouse' });
+
+        clock.tick(OPEN_DELAY / 2);
+
+        await flushMicrotasks();
+
+        expect(screen.queryByText('Content')).toBe(null);
+      });
+
       it('should open when the trigger was clicked before delay duration and closeOnClick is false', async () => {
         await render(<TestTooltip triggerProps={{ closeOnClick: false }} />);
 

packages/react/src/tooltip/trigger/TooltipTrigger.tsx

@@ -289,6 +289,9 @@ export const TooltipTrigger = fastComponentRef(function TooltipTrigger(
         onPointerDown(event: React.PointerEvent) {
           pointerTypeRef.current = event.pointerType;
           store.set('closeOnClick', closeOnClick);
+          if (closeOnClick && !store.select('open')) {
+            store.cancelPendingOpen(event.nativeEvent);
+          }
         },
         onClick(event) {
           if (closeOnClick && !store.select('open')) {