[select] Refactor touch modality check

Author: atomiks

packages/react/src/select/list/SelectList.tsx

@@ -26,7 +26,7 @@ export const SelectList = React.forwardRef(function SelectList(
   const { alignItemWithTriggerActive } = useSelectPositionerContext();
 
   const hasScrollArrows = useStore(store, selectors.hasScrollArrows);
-  const touchModality = useStore(store, selectors.touchModality);
+  const openMethod = useStore(store, selectors.openMethod);
   const multiple = useStore(store, selectors.multiple);
   const id = useStore(store, selectors.id);
 
@@ -40,7 +40,8 @@ export const SelectList = React.forwardRef(function SelectList(
     ...(alignItemWithTriggerActive && {
       style: LIST_FUNCTIONAL_STYLES,
     }),
-    className: hasScrollArrows && !touchModality ? styleDisableScrollbar.className : undefined,
+    className:
+      hasScrollArrows && openMethod !== 'touch' ? styleDisableScrollbar.className : undefined,
   };
 
   const setListElement = useStableCallback((element: HTMLElement | null) => {

packages/react/src/select/positioner/SelectPositioner.tsx

@@ -68,7 +68,7 @@ export const SelectPositioner = React.forwardRef(function SelectPositioner(
   const mounted = useStore(store, selectors.mounted);
   const modal = useStore(store, selectors.modal);
   const value = useStore(store, selectors.value);
-  const touchModality = useStore(store, selectors.touchModality);
+  const openMethod = useStore(store, selectors.openMethod);
   const positionerElement = useStore(store, selectors.positionerElement);
   const triggerElement = useStore(store, selectors.triggerElement);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
@@ -78,7 +78,7 @@ export const SelectPositioner = React.forwardRef(function SelectPositioner(
 
   const [controlledAlignItemWithTrigger, setControlledAlignItemWithTrigger] =
     React.useState(alignItemWithTrigger);
-  const alignItemWithTriggerActive = mounted && controlledAlignItemWithTrigger && !touchModality;
+  const alignItemWithTriggerActive = mounted && controlledAlignItemWithTrigger && openMethod !== 'touch';
 
   if (!mounted && controlledAlignItemWithTrigger !== alignItemWithTrigger) {
     setControlledAlignItemWithTrigger(alignItemWithTrigger);
@@ -97,7 +97,10 @@ export const SelectPositioner = React.forwardRef(function SelectPositioner(
 
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
 
-  useScrollLock((alignItemWithTriggerActive || modal) && open && !touchModality, triggerElement);
+  useScrollLock(
+    (alignItemWithTriggerActive || modal) && open && openMethod !== 'touch',
+    triggerElement,
+  );
 
   const positioning = useAnchorPositioning({
     anchor,

packages/react/src/select/root/SelectRoot.tsx

@@ -35,6 +35,8 @@ import { stringifyAsValue } from '../../utils/resolveValueLabel';
 import { EMPTY_ARRAY } from '../../utils/constants';
 import { defaultItemEquality, findItemIndex } from '../../utils/itemEquality';
 import { useValueChanged } from '../../utils/useValueChanged';
+import { useOpenInteractionType } from '../../utils/useOpenInteractionType';
+import { mergeProps } from '../../merge-props';
 
 /**
  * Groups all parts of the select.
@@ -118,6 +120,11 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
   const alignItemWithTriggerActiveRef = React.useRef(false);
 
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
+  const {
+    openMethod,
+    triggerProps: interactionTypeProps,
+    reset: resetOpenInteractionType,
+  } = useOpenInteractionType(open);
 
   const store = useRefWithInit(
     () =>
@@ -134,7 +141,7 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
         transitionStatus,
         items,
         forceMount: false,
-        touchModality: false,
+        openMethod: null,
         activeIndex: null,
         selectedIndex: null,
         popupProps: {},
@@ -250,6 +257,7 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
   const handleUnmount = useStableCallback(() => {
     setMounted(false);
     store.set('activeIndex', null);
+    resetOpenInteractionType();
     onOpenChangeComplete?.(false);
   });
 
@@ -360,10 +368,15 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
     typeahead,
   ]);
 
+  const mergedTriggerProps = React.useMemo(
+    () => mergeProps(getReferenceProps(), interactionTypeProps),
+    [getReferenceProps, interactionTypeProps],
+  );
+
   useOnFirstRender(() => {
     store.update({
       popupProps: getFloatingProps(),
-      triggerProps: getReferenceProps(),
+      triggerProps: mergedTriggerProps,
     });
   });
 
@@ -377,11 +390,12 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
       mounted,
       transitionStatus,
       popupProps: getFloatingProps(),
-      triggerProps: getReferenceProps(),
+      triggerProps: mergedTriggerProps,
       items,
       itemToStringLabel,
       itemToStringValue,
       isItemEqualToValue,
+      openMethod,
     });
   }, [
     store,
@@ -393,11 +407,12 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
     mounted,
     transitionStatus,
     getFloatingProps,
-    getReferenceProps,
+    mergedTriggerProps,
     items,
     itemToStringLabel,
     itemToStringValue,
     isItemEqualToValue,
+    openMethod,
   ]);
 
   const contextValue: SelectRootContext = React.useMemo(

packages/react/src/select/scroll-arrow/SelectScrollArrow.tsx

@@ -29,10 +29,10 @@ export const SelectScrollArrow = React.forwardRef(function SelectScrollArrow(
     direction === 'up' ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
 
   const stateVisible = useStore(store, visibleSelector);
-  const touchModality = useStore(store, selectors.touchModality);
+  const openMethod = useStore(store, selectors.openMethod);
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
-  const visible = stateVisible && !touchModality;
+  const visible = stateVisible && openMethod !== 'touch';
 
   const timeout = useTimeout();
 

packages/react/src/select/store.ts

@@ -1,4 +1,5 @@
 import { Store, createSelector } from '@base-ui-components/utils/store';
+import { type InteractionType } from '@base-ui-components/utils/useEnhancedClickHandler';
 import type { TransitionStatus } from '../utils/useTransitionStatus';
 import type { HTMLProps } from '../utils/types';
 import { compareItemEquality } from '../utils/itemEquality';
@@ -23,7 +24,7 @@ export type State = {
   mounted: boolean;
   forceMount: boolean;
   transitionStatus: TransitionStatus;
-  touchModality: boolean;
+  openMethod: InteractionType | null;
 
   activeIndex: number | null;
   selectedIndex: number | null;
@@ -57,7 +58,7 @@ export const selectors = {
   mounted: createSelector((state: State) => state.mounted),
   forceMount: createSelector((state: State) => state.forceMount),
   transitionStatus: createSelector((state: State) => state.transitionStatus),
-  touchModality: createSelector((state: State) => state.touchModality),
+  openMethod: createSelector((state: State) => state.openMethod),
 
   activeIndex: createSelector((state: State) => state.activeIndex),
   selectedIndex: createSelector((state: State) => state.selectedIndex),

packages/react/src/select/trigger/SelectTrigger.tsx

@@ -169,12 +169,8 @@ export const SelectTrigger = React.forwardRef(function SelectTrigger(
           validation.commit(value);
         }
       },
-      onPointerMove({ pointerType }) {
+      onPointerMove() {
         keyboardActiveRef.current = false;
-        store.set('touchModality', pointerType === 'touch');
-      },
-      onPointerDown({ pointerType }) {
-        store.set('touchModality', pointerType === 'touch');
       },
       onKeyDown() {
         keyboardActiveRef.current = true;