@base-ui/react 1.6.0 → 1.7.0

package/select/positioner/SelectPositioner.js

@@ -13,7 +13,7 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _CompositeList = require("../../internals/composite/list/CompositeList");
-var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
+var _useAnchorPositioning = require("../../internals/useAnchorPositioning");
 var _SelectPositionerContext = require("./SelectPositionerContext");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _constants = require("../../internals/constants");
@@ -38,17 +38,19 @@ const FIXED = {
 const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner(componentProps, forwardedRef) {
   const {
     anchor,
-    positionMethod = 'absolute',
     className,
     render,
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
     collisionPadding,
-    arrowPadding = 5,
-    sticky = false,
+    arrowPadding,
+    sticky,
     disableAnchorTracking,
     alignItemWithTrigger = true,
     collisionAvoidance = _constants.DROPDOWN_COLLISION_AVOIDANCE,
@@ -64,9 +66,9 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     valuesRef,
     initialValueRef,
     popupRef,
-    setValue
+    setValue,
+    floatingContext: floatingRootContext
   } = (0, _SelectRootContext.useSelectRootContext)();
-  const floatingRootContext = (0, _SelectRootContext.useSelectFloatingContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const modal = (0, _store.useStore)(store, _store2.selectors.modal);
@@ -83,16 +85,6 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
   if (!mounted && controlledAlignItemWithTrigger !== alignItemWithTrigger) {
     setControlledAlignItemWithTrigger(alignItemWithTrigger);
   }
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!mounted) {
-      if (_store2.selectors.scrollUpArrowVisible(store.state)) {
-        store.set('scrollUpArrowVisible', false);
-      }
-      if (_store2.selectors.scrollDownArrowVisible(store.state)) {
-        store.set('scrollDownArrowVisible', false);
-      }
-    }
-  }, [store, mounted]);
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
   (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)((alignItemWithTriggerActive || modal) && open, openMethod === 'touch', positionerElement, triggerElement);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
@@ -123,9 +115,7 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const setPositionerElement = (0, _useStableCallback.useStableCallback)(element => {
-    store.set('positionerElement', element);
-  });
+  const setPositionerElement = store.useStateSetter('positionerElement');
   const element = (0, _usePositioner.usePositioner)(componentProps, state, {
     styles: positionerStyles,
     transitionStatus,
@@ -136,9 +126,6 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = (0, _useStableCallback.useStableCallback)(map => {
-    if (map.size === 0 && prevMapSizeRef.current === 0) {
-      return;
-    }
     if (valuesRef.current.length === 0) {
       return;
     }
@@ -162,9 +149,8 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
       }
     }
     if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
-      const hasVisibleItem = selectedItemValue => (0, _itemEquality.findItemIndex)(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1;
-      const nextValue = value.filter(selectedItemValue => hasVisibleItem(selectedItemValue));
-      if (nextValue.length !== value.length || nextValue.some(selectedItemValue => !(0, _itemEquality.selectedValueIncludes)(value, selectedItemValue, isItemEqualToValue))) {
+      const nextValue = value.filter(selectedItemValue => (0, _itemEquality.findItemIndex)(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1);
+      if (nextValue.length !== value.length) {
         setValue(nextValue, eventDetails);
         if (nextValue.length === 0) {
           store.set('selectedIndex', null);

package/select/positioner/SelectPositioner.mjs

@@ -5,9 +5,9 @@ import { inertValue } from '@base-ui/utils/inertValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStore } from '@base-ui/utils/store';
-import { useSelectRootContext, useSelectFloatingContext } from "../root/SelectRootContext.mjs";
+import { useSelectRootContext } from "../root/SelectRootContext.mjs";
 import { CompositeList } from "../../internals/composite/list/CompositeList.mjs";
-import { useAnchorPositioning } from "../../utils/useAnchorPositioning.mjs";
+import { useAnchorPositioning } from "../../internals/useAnchorPositioning.mjs";
 import { SelectPositionerContext } from "./SelectPositionerContext.mjs";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.mjs";
 import { DROPDOWN_COLLISION_AVOIDANCE } from "../../internals/constants.mjs";
@@ -15,7 +15,7 @@ import { clearStyles } from "../popup/utils.mjs";
 import { selectors } from "../store.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
-import { findItemIndex, selectedValueIncludes } from "../../internals/itemEquality.mjs";
+import { findItemIndex } from "../../internals/itemEquality.mjs";
 import { usePositioner } from "../../utils/usePositioner.mjs";
 import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,17 +32,19 @@ const FIXED = {
 export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner(componentProps, forwardedRef) {
   const {
     anchor,
-    positionMethod = 'absolute',
     className,
     render,
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
     collisionPadding,
-    arrowPadding = 5,
-    sticky = false,
+    arrowPadding,
+    sticky,
     disableAnchorTracking,
     alignItemWithTrigger = true,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
@@ -58,9 +60,9 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
     valuesRef,
     initialValueRef,
     popupRef,
-    setValue
+    setValue,
+    floatingContext: floatingRootContext
   } = useSelectRootContext();
-  const floatingRootContext = useSelectFloatingContext();
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const modal = useStore(store, selectors.modal);
@@ -77,16 +79,6 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
   if (!mounted && controlledAlignItemWithTrigger !== alignItemWithTrigger) {
     setControlledAlignItemWithTrigger(alignItemWithTrigger);
   }
-  useIsoLayoutEffect(() => {
-    if (!mounted) {
-      if (selectors.scrollUpArrowVisible(store.state)) {
-        store.set('scrollUpArrowVisible', false);
-      }
-      if (selectors.scrollDownArrowVisible(store.state)) {
-        store.set('scrollDownArrowVisible', false);
-      }
-    }
-  }, [store, mounted]);
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
   useAnchoredPopupScrollLock((alignItemWithTriggerActive || modal) && open, openMethod === 'touch', positionerElement, triggerElement);
   const positioning = useAnchorPositioning({
@@ -117,9 +109,7 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
   useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const setPositionerElement = useStableCallback(element => {
-    store.set('positionerElement', element);
-  });
+  const setPositionerElement = store.useStateSetter('positionerElement');
   const element = usePositioner(componentProps, state, {
     styles: positionerStyles,
     transitionStatus,
@@ -130,9 +120,6 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = useStableCallback(map => {
-    if (map.size === 0 && prevMapSizeRef.current === 0) {
-      return;
-    }
     if (valuesRef.current.length === 0) {
       return;
     }
@@ -156,9 +143,8 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
       }
     }
     if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
-      const hasVisibleItem = selectedItemValue => findItemIndex(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1;
-      const nextValue = value.filter(selectedItemValue => hasVisibleItem(selectedItemValue));
-      if (nextValue.length !== value.length || nextValue.some(selectedItemValue => !selectedValueIncludes(value, selectedItemValue, isItemEqualToValue))) {
+      const nextValue = value.filter(selectedItemValue => findItemIndex(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1);
+      if (nextValue.length !== value.length) {
         setValue(nextValue, eventDetails);
         if (nextValue.length === 0) {
           store.set('selectedIndex', null);

package/select/positioner/SelectPositionerContext.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Side, UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.mjs";
+import type { Side, UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.mjs";
 export interface SelectPositionerContext extends Omit<UseAnchorPositioningReturnValue, 'side'> {
   side: 'none' | Side;
   alignItemWithTriggerActive: boolean;

package/select/positioner/SelectPositionerContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Side, UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+import type { Side, UseAnchorPositioningReturnValue } from "../../internals/useAnchorPositioning.js";
 export interface SelectPositionerContext extends Omit<UseAnchorPositioningReturnValue, 'side'> {
   side: 'none' | Side;
   alignItemWithTriggerActive: boolean;

package/select/root/SelectRoot.d.mts

@@ -83,6 +83,8 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * Determines if the select enters a modal state when open.
    * - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
+   *
+   * On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.
    * @default true
    */
   modal?: boolean | undefined;

package/select/root/SelectRoot.d.ts

@@ -83,6 +83,8 @@ export interface SelectRootProps<Value, Multiple extends boolean | undefined = f
    * Determines if the select enters a modal state when open.
    * - `true`: user interaction is limited to the select: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
+   *
+   * On touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.
    * @default true
    */
   modal?: boolean | undefined;

package/select/root/SelectRoot.js

@@ -128,7 +128,7 @@ function SelectRoot(props) {
     openMethod,
     triggerProps: interactionTypeProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
-  const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.Store({
+  const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.ReactStore({
     id: generatedId,
     labelId: undefined,
     modal,
@@ -160,7 +160,7 @@ function SelectRoot(props) {
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const previousOpenMethod = (0, _usePreviousValue.usePreviousValue)(openMethod);
-  const renderedOpenMethod = openMethod ?? previousOpenMethod ?? null;
+  const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
     // In multiple mode the shared input is nameless; per-value entries are submitted via
     // `hiddenInputs`. Its value is therefore irrelevant, and passing the whole array to
@@ -176,38 +176,26 @@ function SelectRoot(props) {
     }
     return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
-  const controlRef = (0, _useValueAsRef.useValueAsRef)(store.state.triggerElement);
+  const controlRef = (0, _useValueAsRef.useValueAsRef)(triggerElement);
   const getStringifiedValueForForm = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
   (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, generatedId, value, getStringifiedValueForForm, !disabled, nameProp);
   const initialValueRef = React.useRef(value);
   // Mirror the `hasSelectedValue` store selector so the Field's filled state agrees with the
   // trigger/value placeholder semantics (a value serializing to `''` counts as empty).
-  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null && (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue) !== '';
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    // Ensure the values and labels are registered for programmatic value changes.
-    if (value !== initialValueRef.current) {
-      store.set('forceMount', true);
-    }
-  }, [store, value]);
+  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null && serializedValue !== '';
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     setFilled(hasSelectedValue);
   }, [hasSelectedValue, setFilled]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(function syncSelectedIndex() {
-    const registry = valuesRef.current;
-    let nextIndex;
+    let target = value;
+    let empty = false;
     if (multiple) {
       const currentValue = Array.isArray(value) ? value : [];
-      if (currentValue.length === 0) {
-        nextIndex = null;
-      } else {
-        const lastValue = currentValue[currentValue.length - 1];
-        const lastIndex = (0, _itemEquality.findItemIndex)(registry, lastValue, isItemEqualToValue);
-        nextIndex = lastIndex === -1 ? null : lastIndex;
-      }
-    } else {
-      const index = (0, _itemEquality.findItemIndex)(registry, value, isItemEqualToValue);
-      nextIndex = index === -1 ? null : index;
+      empty = currentValue.length === 0;
+      target = currentValue[currentValue.length - 1];
     }
+    const index = empty ? -1 : (0, _itemEquality.findItemIndex)(valuesRef.current, target, isItemEqualToValue);
+    const nextIndex = index === -1 ? null : index;
     if (nextIndex === null) {
       selectedItemTextRef.current = null;
     }
@@ -215,7 +203,7 @@ function SelectRoot(props) {
       return;
     }
     store.set('selectedIndex', nextIndex);
-  }, [hasSelectedValue, multiple, open, value, valuesRef, isItemEqualToValue, store, selectedItemTextRef]);
+  }, [multiple, open, value, isItemEqualToValue, store]);
   function isSelectedValueDirty(currentValue) {
     const initialValue = validityData.initialValue;
     if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
@@ -246,7 +234,9 @@ function SelectRoot(props) {
     setMounted(false);
     store.update({
       activeIndex: null,
-      openMethod: null
+      openMethod: null,
+      scrollUpArrowVisible: false,
+      scrollDownArrowVisible: false
     });
     onOpenChangeComplete?.(false);
   });
@@ -270,21 +260,13 @@ function SelectRoot(props) {
     }
     setValueUnwrapped(nextValue);
   });
-  const handleScrollArrowVisibility = (0, _useStableCallback.useStableCallback)(() => {
-    const scroller = store.state.listElement || popupRef.current;
-    if (!scroller) {
-      return;
-    }
+  const handleScrollArrowVisibility = (0, _useStableCallback.useStableCallback)(scroller => {
     const maxScrollTop = (0, _scrollEdges.getMaxScrollOffset)(scroller.scrollHeight, scroller.clientHeight);
     const scrollTop = (0, _scrollEdges.normalizeScrollOffset)(scroller.scrollTop, maxScrollTop);
     const shouldShowUp = scrollTop > 0;
     const shouldShowDown = scrollTop < maxScrollTop;
-    if (store.state.scrollUpArrowVisible !== shouldShowUp) {
-      store.set('scrollUpArrowVisible', shouldShowUp);
-    }
-    if (store.state.scrollDownArrowVisible !== shouldShowDown) {
-      store.set('scrollDownArrowVisible', shouldShowDown);
-    }
+    store.set('scrollUpArrowVisible', shouldShowUp);
+    store.set('scrollDownArrowVisible', shouldShowDown);
   });
   const floatingContext = (0, _floatingUiReact.useFloatingRootContext)({
     open,
@@ -329,20 +311,16 @@ function SelectRoot(props) {
       if (open) {
         store.set('activeIndex', index);
       } else {
-        setValue(valuesRef.current[index], (0, _createBaseUIEventDetails.createChangeEventDetails)('none'));
+        setValue(valuesRef.current[index], (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
       }
     },
     onTyping(typing) {
       typingRef.current = typing;
     }
   });
-  const mergedTriggerProps = React.useMemo(() => {
-    const triggerInteractionProps = (0, _mergeProps.mergeProps)(typeahead.reference, listNavigation.reference, dismiss.reference, click.reference, interactionTypeProps);
-    if (generatedId) {
-      triggerInteractionProps.id = generatedId;
-    }
-    return triggerInteractionProps;
-  }, [click.reference, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps, generatedId]);
+
+  // `Select.Trigger` applies the id itself from the store, so it's deliberately not merged here.
+  const mergedTriggerProps = React.useMemo(() => (0, _mergeProps.mergeProps)(typeahead.reference, listNavigation.reference, dismiss.reference, click.reference, interactionTypeProps), [click.reference, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps]);
   const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, typeahead.floating, listNavigation.floating, dismiss.floating), [typeahead.floating, listNavigation.floating, dismiss.floating]);
   const itemProps = listNavigation.item ?? _empty.EMPTY_OBJECT;
   (0, _useOnFirstRender.useOnFirstRender)(() => {
@@ -351,27 +329,25 @@ function SelectRoot(props) {
       triggerProps: mergedTriggerProps
     });
   });
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    store.update({
-      id: generatedId,
-      modal,
-      multiple,
-      value,
-      open,
-      mounted,
-      transitionStatus,
-      popupProps,
-      triggerProps: mergedTriggerProps,
-      items,
-      itemToStringLabel,
-      itemToStringValue,
-      isItemEqualToValue,
-      openMethod: renderedOpenMethod
-    });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, popupProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
+  store.useSyncedValues({
+    id: generatedId,
+    modal,
+    multiple,
+    value,
+    open,
+    mounted,
+    transitionStatus,
+    popupProps,
+    triggerProps: mergedTriggerProps,
+    items,
+    itemToStringLabel,
+    itemToStringValue,
+    isItemEqualToValue,
+    openMethod: renderedOpenMethod
+  });
   const contextValue = React.useMemo(() => ({
     store,
-    name,
+    floatingContext,
     required,
     disabled,
     readOnly,
@@ -396,9 +372,8 @@ function SelectRoot(props) {
     onOpenChangeComplete,
     alignItemWithTriggerActiveRef,
     initialValueRef
-  }), [store, name, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+  }), [store, floatingContext, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = (0, _useMergedRefs.useMergedRefs)(inputRef, validation.inputRef);
-  const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(value) || !name) {
@@ -415,68 +390,65 @@ function SelectRoot(props) {
       }, currentSerializedValue);
     });
   }, [multiple, value, form, name, itemToStringValue, disabled]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectRootContext.SelectRootContext.Provider, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectRootContext.SelectRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SelectRootContext.SelectFloatingContext.Provider, {
-      value: floatingContext,
-      children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-        ...validation.getValidationProps(disabled, {
-          onFocus() {
-            // Move focus to the trigger element when the hidden input is focused.
-            store.state.triggerElement?.focus({
-              // Supported in Chrome from 144 (January 2026)
-              focusVisible: true
-            });
-          },
-          // Handle browser autofill.
-          onChange(event) {
-            // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+    children: [children, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+      ...validation.getValidationProps(disabled, {
+        onFocus() {
+          // Move focus to the trigger element when the hidden input is focused.
+          store.state.triggerElement?.focus({
+            // Supported in Chrome from 144 (January 2026)
+            focusVisible: true
+          });
+        },
+        // Handle browser autofill.
+        onChange(event) {
+          // Workaround for https://github.com/react/react/issues/9023
+          if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+            return;
+          }
+          const nextValue = event.currentTarget.value;
+          const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
+          function handleChange() {
+            if (multiple) {
+              // Browser autofill only writes a single scalar value.
               return;
             }
-            const nextValue = event.currentTarget.value;
-            const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
-            function handleChange() {
-              if (multiple) {
-                // Browser autofill only writes a single scalar value.
-                return;
-              }
 
-              // Preserve the original serialized matching, then fall back to rendered text,
-              // which browsers can autofill for primitive values like `value="US">United States`.
-              const nextValueLower = nextValue.toLowerCase();
-              let matchingIndex = valuesRef.current.findIndex(candidate => (0, _resolveValueLabel.stringifyAsValue)(candidate, itemToStringValue).toLowerCase() === nextValueLower || (0, _resolveValueLabel.stringifyAsLabel)(candidate, itemToStringLabel).toLowerCase() === nextValueLower);
-              if (matchingIndex === -1) {
-                matchingIndex = valuesRef.current.findIndex((_, index) => {
-                  const renderedLabel = labelsRef.current[index];
-                  return renderedLabel != null && renderedLabel.toLowerCase() === nextValueLower;
-                });
-              }
-              const matchingValue = matchingIndex === -1 ? undefined : valuesRef.current[matchingIndex];
-              if (matchingValue != null) {
-                // `setValue` may be canceled by `onValueChange`; rely on `useValueChanged` to
-                // mark the field dirty and run validation only when the value actually changes.
-                setValue(matchingValue, details);
-              }
+            // Preserve the original serialized matching, then fall back to rendered text,
+            // which browsers can autofill for primitive values like `value="US">United States`.
+            const nextValueLower = nextValue.toLowerCase();
+            let matchingIndex = valuesRef.current.findIndex(candidate => (0, _resolveValueLabel.stringifyAsValue)(candidate, itemToStringValue).toLowerCase() === nextValueLower || (0, _resolveValueLabel.stringifyAsLabel)(candidate, itemToStringLabel).toLowerCase() === nextValueLower);
+            if (matchingIndex === -1) {
+              matchingIndex = valuesRef.current.findIndex((_, index) => {
+                const renderedLabel = labelsRef.current[index];
+                return renderedLabel != null && renderedLabel.toLowerCase() === nextValueLower;
+              });
+            }
+            const matchingValue = valuesRef.current[matchingIndex];
+            if (matchingValue != null) {
+              // `setValue` may be canceled by `onValueChange`; rely on `useValueChanged` to
+              // mark the field dirty and run validation only when the value actually changes.
+              setValue(matchingValue, details);
             }
-            store.set('forceMount', true);
-            queueMicrotask(handleChange);
           }
-        }),
-        id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
-        form: form,
-        name: hiddenInputName,
-        autoComplete: autoComplete,
-        value: serializedValue,
-        disabled: disabled,
-        required: required && !hasMultipleSelection,
-        readOnly: readOnly,
-        ref: ref,
-        style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
-        tabIndex: -1,
-        "aria-hidden": true,
-        suppressHydrationWarning: true
-      }), hiddenInputs]
-    })
+          store.set('forceMount', true);
+          queueMicrotask(handleChange);
+        }
+      }),
+      id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+      form: form,
+      name: hiddenInputName,
+      autoComplete: autoComplete,
+      value: serializedValue,
+      disabled: disabled,
+      required: required && !(multiple && hasSelectedValue),
+      readOnly: readOnly,
+      ref: ref,
+      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
+      tabIndex: -1,
+      "aria-hidden": true,
+      suppressHydrationWarning: true
+    }), hiddenInputs]
   });
 }