fix: Select2 - Opening click retargeted to body no longer closes popup

- track pressStartedInside; ignore click that ends a press begun inside
- portalled popup can mount under cursor, retargeting click outside
- add regression tests for opening-click retarget and outside-gesture close

Author: apostololeg

src/components/Select/Select2.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
@@ -118,6 +118,32 @@ describe('Select2 open state', () => {
     await waitFor(() => expect(isOpened()).toBe(false));
   });
 
+  test('the opening click does not close when it retargets outside mid-gesture', () => {
+    render(<Controlled isSearchable label="Label" />);
+
+    // A portalled popup can mount under the cursor; the click then targets a
+    // common ancestor outside the select (here document.body) even though the
+    // press started on the trigger.
+    fireEvent.pointerDown(getSearchInput());
+    expect(isOpened()).toBe(true);
+
+    fireEvent.pointerUp(document.body);
+    fireEvent.click(document.body);
+    expect(isOpened()).toBe(true);
+  });
+
+  test('a pointer gesture that started outside closes', () => {
+    render(<Controlled isSearchable label="Label" />);
+
+    fireEvent.pointerDown(getSearchInput());
+    expect(isOpened()).toBe(true);
+
+    fireEvent.pointerDown(document.body);
+    fireEvent.pointerUp(document.body);
+    fireEvent.click(document.body);
+    expect(isOpened()).toBe(false);
+  });
+
   test('closes on blur when the focus leaves the select', async () => {
     render(
       <>

src/components/Select/Select2.tsx

@@ -81,6 +81,7 @@ export function Select2(props: T.Props) {
   const contentRef = useRef<HTMLDivElement>(null);
   const scrollInnerRef = useRef<HTMLDivElement>(null);
   const pointerPressedInside = useRef(false);
+  const pressStartedInside = useRef(false);
   const pointerPressTimer = useRef(0);
   const blurTimer = useRef(0);
 
@@ -242,23 +243,43 @@ export function Select2(props: T.Props) {
     else open();
   };
 
+  const markPressInside = (isInside: boolean) => {
+    window.clearTimeout(pointerPressTimer.current);
+    pointerPressedInside.current = isInside;
+    pointerPressTimer.current = window.setTimeout(
+      () => (pointerPressedInside.current = false),
+      POINTER_PRESS_TTL
+    );
+  };
+
   useEvent({
     event: 'pointerdown',
     isCapture: true,
     callback: e => {
-      window.clearTimeout(pointerPressTimer.current);
-      pointerPressedInside.current = isInsideSelect(e.target);
-      pointerPressTimer.current = window.setTimeout(
-        () => (pointerPressedInside.current = false),
-        POINTER_PRESS_TTL
-      );
+      pressStartedInside.current = isInsideSelect(e.target);
+      markPressInside(pressStartedInside.current);
+    },
+  });
+
+  useEvent({
+    event: 'pointerup',
+    isCapture: true,
+    callback: () => {
+      // The release can land on the portalled popup that mounted under the
+      // cursor mid-gesture, so the up-target is not a reliable inside signal.
+      if (pressStartedInside.current) markPressInside(true);
+      pressStartedInside.current = false;
     },
   });
 
   useEvent({
     event: 'click',
     isActive: isOpen,
     callback: e => {
+      // The click concluding a press that started inside must not count as an
+      // outside click: the portalled popup can mount under the cursor, which
+      // retargets the click to a common ancestor outside the select.
+      if (pointerPressedInside.current) return;
       if (!isInsideSelect(e.target)) close();
     },
   });