[tooltip] Cancel pending open on pointerdown

Author: atomiks

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

@@ -821,6 +821,26 @@ 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.pointerEnter(trigger, { pointerType: 'mouse' });
+        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')) {