@base-ui/react 1.1.0 → 1.3.0

package/combobox/positioner/ComboboxPositioner.js

@@ -18,6 +18,7 @@ var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _ComboboxPortalContext = require("../portal/ComboboxPortalContext");
 var _constants = require("../../utils/constants");
+var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _store2 = require("../store");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
@@ -56,9 +57,11 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
+  const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
+  const transitionStatus = (0, _store.useStore)(store, _store2.selectors.transitionStatus);
   const empty = filteredItems.length === 0;
-  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputElement);
+  const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
     anchor: resolvedAnchor,
     floatingRootContext,
@@ -91,13 +94,13 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
       style
     };
   }, [open, mounted, positioning.positionerStyles]);
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     empty
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, empty]);
+  };
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
@@ -116,14 +119,14 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, elementProps],
+    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
     stateAttributesMapping: _popupStateMapping.popupStateMapping
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ComboboxPositionerContext.ComboboxPositionerContext.Provider, {
     value: contextValue,
     children: [mounted && modal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
       inert: (0, _inertValue.inertValue)(!open),
-      cutout: inputElement ?? triggerElement
+      cutout: inputGroupElement ?? inputElement ?? triggerElement
     }), element]
   });
 });

package/combobox/positioner/ComboboxPositionerDataAttributes.js

@@ -22,12 +22,12 @@ let ComboboxPositionerDataAttributes = exports.ComboboxPositionerDataAttributes
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxPositionerDataAttributes["side"] = "data-side";
+  ComboboxPositionerDataAttributes[ComboboxPositionerDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxPositionerDataAttributes["align"] = "data-align";
+  ComboboxPositionerDataAttributes[ComboboxPositionerDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the items list is empty.
    */

package/combobox/root/AriaCombobox.d.ts

@@ -5,11 +5,11 @@ import { Group } from "../../utils/resolveValueLabel.js";
 /**
  * @internal
  */
-export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<ComboboxRootConditionalProps<Value, Mode>, 'items'> & {
+export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
   items: readonly Group<any>[];
 }): React.JSX.Element;
-export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<ComboboxRootConditionalProps<Value, Mode>, 'items'> & {
-  items?: readonly any[];
+export declare function AriaCombobox<Value, Mode extends SelectionMode = 'none'>(props: Omit<AriaComboboxProps<Value, Mode>, 'items'> & {
+  items?: readonly any[] | undefined;
 }): React.JSX.Element;
 type SelectionMode = 'single' | 'multiple' | 'none';
 type ComboboxItemValueType<ItemValue, Mode extends SelectionMode> = Mode extends 'multiple' ? ItemValue[] : ItemValue;
@@ -18,50 +18,50 @@ interface ComboboxRootProps<ItemValue> {
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The id of the component.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Whether the user must choose a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the user should be unable to choose a different option from the popup.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the popup is initially open.
    *
    * To render a controlled popup, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Whether the popup is currently open. Use when controlled.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Event handler called when the popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AriaCombobox.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AriaCombobox.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the popup is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the popup opens when clicking the input.
    * @default true
    */
-  openOnInputClick?: boolean;
+  openOnInputClick?: boolean | undefined;
   /**
    * Whether the first matching item is highlighted automatically.
    * - `false`: do not highlight automatically.
@@ -69,46 +69,46 @@ interface ComboboxRootProps<ItemValue> {
    * - `'always'`: highlight the first item as soon as the list opens.
    * @default false
    */
-  autoHighlight?: boolean | 'always';
+  autoHighlight?: boolean | 'always' | undefined;
   /**
    * Whether the highlighted item should be preserved when the pointer leaves the list.
    * @default false
    */
-  keepHighlight?: boolean;
+  keepHighlight?: boolean | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input.
    * The input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).
    * When disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
   /**
    * The input value of the combobox. Use when controlled.
    */
-  inputValue?: React.ComponentProps<'input'>['value'];
+  inputValue?: React.ComponentProps<'input'>['value'] | undefined;
   /**
    * Callback fired when the input value of the combobox changes.
    */
-  onInputValueChange?: (value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void;
+  onInputValueChange?: ((value: string, eventDetails: AriaCombobox.ChangeEventDetails) => void) | undefined;
   /**
    * The uncontrolled input value when initially rendered.
    *
    * To render a controlled input, use the `inputValue` prop instead.
    */
-  defaultInputValue?: React.ComponentProps<'input'>['defaultValue'];
+  defaultInputValue?: React.ComponentProps<'input'>['defaultValue'] | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the combobox will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the combobox manually.
    * Useful when the combobox's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<AriaCombobox.Actions | null>;
+  actionsRef?: React.RefObject<AriaCombobox.Actions | null> | undefined;
   /**
    * Callback fired when an item is highlighted or unhighlighted.
    * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.
@@ -117,69 +117,69 @@ interface ComboboxRootProps<ItemValue> {
    * - `'pointer'`: the highlight changed due to pointer hovering.
    * - `'none'`: the highlight changed programmatically.
    */
-  onItemHighlighted?: (itemValue: ItemValue | undefined, eventDetails: AriaCombobox.HighlightEventDetails) => void;
+  onItemHighlighted?: ((itemValue: ItemValue | undefined, eventDetails: AriaCombobox.HighlightEventDetails) => void) | undefined;
   /**
    * A ref to the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Whether list items are presented in a grid layout.
    * When enabled, arrow keys navigate across rows and columns inferred from DOM rows.
    * @default false
    */
-  grid?: boolean;
+  grid?: boolean | undefined;
   /**
    * The items to be displayed in the list.
    * Can be either a flat array of items or an array of groups with items.
    */
-  items?: readonly any[] | readonly Group<any>[];
+  items?: readonly any[] | readonly Group<any>[] | undefined;
   /**
    * Filtered items to display in the list.
    * When provided, the list will use these items instead of filtering the `items` prop internally.
    * Use when you want to control filtering logic externally with the `useFilter()` hook.
    */
-  filteredItems?: readonly any[] | readonly Group<any>[];
+  filteredItems?: readonly any[] | readonly Group<any>[] | undefined;
   /**
    * Filter function used to match items vs input query.
    */
-  filter?: null | ((itemValue: ItemValue, query: string, itemToString?: (itemValue: ItemValue) => string) => boolean);
+  filter?: null | ((itemValue: ItemValue, query: string, itemToString?: (itemValue: ItemValue) => string) => boolean) | undefined;
   /**
    * When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringLabel?: (itemValue: ItemValue) => string;
+  itemToStringLabel?: ((itemValue: ItemValue) => string) | undefined;
   /**
    * When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission.
    * If the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: ItemValue) => string;
+  itemToStringValue?: ((itemValue: ItemValue) => string) | undefined;
   /**
    * Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially.
    * Defaults to `Object.is` comparison.
    */
-  isItemEqualToValue?: (itemValue: ItemValue, selectedValue: ItemValue) => boolean;
+  isItemEqualToValue?: ((itemValue: ItemValue, value: ItemValue) => boolean) | undefined;
   /**
    * Whether the items are being externally virtualized.
    * @default false
    */
-  virtualized?: boolean;
+  virtualized?: boolean | undefined;
   /**
    * Whether the list is rendered inline without using the popup.
    * @default false
    */
-  inline?: boolean;
+  inline?: boolean | undefined;
   /**
    * Determines if the popup enters a modal state when open.
    * - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * @default false
    */
-  modal?: boolean;
+  modal?: boolean | undefined;
   /**
    * The maximum number of items to display in the list.
    * @default -1
    */
-  limit?: number;
+  limit?: number | undefined;
   /**
    * Controls how the component behaves with respect to list filtering and inline autocompletion.
    * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.
@@ -188,23 +188,29 @@ interface ComboboxRootProps<ItemValue> {
    * - `none`: items are static (not filtered), and the input value will not change based on the active item.
    * @default 'list'
    */
-  autoComplete?: 'list' | 'both' | 'inline' | 'none';
+  autoComplete?: 'list' | 'both' | 'inline' | 'none' | undefined;
+  /**
+   * Provides a hint to the browser for autofill on the hidden input element.
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete
+   */
+  formAutoComplete?: string | undefined;
   /**
    * The locale to use for string comparison.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * Whether clicking an item should submit the owning form.
    * @default false
    */
-  submitOnItemClick?: boolean;
+  submitOnItemClick?: boolean | undefined;
   /**
    * INTERNAL: When `selectionMode` is `none`, controls whether selecting an item fills the input.
    */
-  fillInputOnItemPress?: boolean;
+  fillInputOnItemPress?: boolean | undefined;
 }
-export type ComboboxRootConditionalProps<Value, Mode extends SelectionMode = 'none'> = Omit<ComboboxRootProps<Value>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange'> & {
+export interface AriaComboboxState {}
+export type AriaComboboxProps<Value, Mode extends SelectionMode = 'none'> = ComboboxRootProps<Value> & {
   /**
    * How the combobox should remember the selected value.
    * - `single`: Remembers the last selected value.
@@ -212,25 +218,25 @@ export type ComboboxRootConditionalProps<Value, Mode extends SelectionMode = 'no
    * - `none`: Do not remember the selected value.
    * @default 'none'
    */
-  selectionMode?: Mode;
+  selectionMode?: Mode | undefined;
   /**
    * The selected value of the combobox. Use when controlled.
    */
-  selectedValue?: ComboboxItemValueType<Value, Mode>;
+  selectedValue?: ComboboxItemValueType<Value, Mode> | undefined;
   /**
    * The uncontrolled selected value of the combobox when it's initially rendered.
    *
    * To render a controlled combobox, use the `selectedValue` prop instead.
    */
-  defaultSelectedValue?: ComboboxItemValueType<Value, Mode> | null;
+  defaultSelectedValue?: ComboboxItemValueType<Value, Mode> | null | undefined;
   /**
    * Callback fired when the selected value of the combobox changes.
    */
-  onSelectedValueChange?: (value: ComboboxItemValueType<Value, Mode>, eventDetails: AriaCombobox.ChangeEventDetails) => void;
+  onSelectedValueChange?: ((value: ComboboxItemValueType<Value, Mode>, eventDetails: AriaCombobox.ChangeEventDetails) => void) | undefined;
 };
 export declare namespace AriaCombobox {
-  type Props<Value, Mode extends SelectionMode = 'none'> = ComboboxRootConditionalProps<Value, Mode>;
-  interface State {}
+  type Props<Value, Mode extends SelectionMode = 'none'> = AriaComboboxProps<Value, Mode>;
+  type State = AriaComboboxState;
   interface Actions {
     unmount: () => void;
   }
@@ -238,7 +244,7 @@ export declare namespace AriaCombobox {
   type HighlightEventDetails = BaseUIGenericEventDetails<HighlightEventReason, {
     index: number;
   }>;
-  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.none;
+  type ChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.outsidePress | typeof REASONS.itemPress | typeof REASONS.closePress | typeof REASONS.escapeKey | typeof REASONS.listNavigation | typeof REASONS.focusOut | typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.clearPress | typeof REASONS.chipRemovePress | typeof REASONS.none;
   type ChangeEventDetails = BaseUIChangeEventDetails<ChangeEventReason>;
 }
 export {};

package/combobox/root/AriaCombobox.js

@@ -76,6 +76,7 @@ function AriaCombobox(props) {
     modal = false,
     limit = -1,
     autoComplete = 'list',
+    formAutoComplete,
     locale,
     submitOnItemClick = false
   } = props;
@@ -106,6 +107,8 @@ function AriaCombobox(props) {
   const labelsRef = React.useRef([]);
   const popupRef = React.useRef(null);
   const inputRef = React.useRef(null);
+  const startDismissRef = React.useRef(null);
+  const endDismissRef = React.useRef(null);
   const emptyRef = React.useRef(null);
   const keyboardActiveRef = React.useRef(true);
   const hadInputClearRef = React.useRef(false);
@@ -258,6 +261,7 @@ function AriaCombobox(props) {
   }, [filteredItems, isGrouped]);
   const store = (0, _useRefWithInit.useRefWithInit)(() => new _store.Store({
     id,
+    labelId: undefined,
     selectedValue,
     open,
     filter,
@@ -269,6 +273,8 @@ function AriaCombobox(props) {
     popupRef,
     emptyRef,
     inputRef,
+    startDismissRef,
+    endDismissRef,
     keyboardActiveRef,
     chipsContainerRef,
     clearRef,
@@ -302,6 +308,7 @@ function AriaCombobox(props) {
     listElement: null,
     triggerElement: null,
     inputElement: null,
+    inputGroupElement: null,
     popupSide: null,
     openMethod: null,
     inputInsidePopup: true,
@@ -335,6 +342,7 @@ function AriaCombobox(props) {
   const listElement = (0, _store.useStore)(store, _store2.selectors.listElement);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
+  const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
   const inline = (0, _store.useStore)(store, _store2.selectors.inline);
   const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
   const triggerRef = (0, _useValueAsRef.useValueAsRef)(triggerElement);
@@ -345,8 +353,7 @@ function AriaCombobox(props) {
   } = (0, _useTransitionStatus.useTransitionStatus)(open);
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _useField.useField)({
     id,
@@ -405,17 +412,24 @@ function AriaCombobox(props) {
     // If user is typing, ensure we don't auto-highlight on open due to a race
     // with the post-open effect that sets this flag.
     if (eventDetails.reason === _reasons.REASONS.inputChange) {
-      const hasQuery = next.trim() !== '';
-      if (hasQuery) {
-        setQueryChangedAfterOpen(true);
-      }
-      // Defer index updates until after the filtered items have been derived to ensure
-      // `onItemHighlighted` receives the latest item.
-      pendingQueryHighlightRef.current = {
-        hasQuery
-      };
-      if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
-        store.set('activeIndex', 0);
+      const event = eventDetails.event;
+      const inputType = event.inputType;
+      // Treat composition commits as typed input; autofill may omit `inputType` or
+      // report `insertReplacementText`.
+      const isTypedInput = event.type === 'compositionend' || inputType != null && inputType !== '' && inputType !== 'insertReplacementText';
+      if (isTypedInput) {
+        const hasQuery = next.trim() !== '';
+        if (hasQuery) {
+          setQueryChangedAfterOpen(true);
+        }
+        // Defer index updates until after the filtered items have been derived to ensure
+        // `onItemHighlighted` receives the latest item.
+        pendingQueryHighlightRef.current = {
+          hasQuery
+        };
+        if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
+          store.set('activeIndex', 0);
+        }
       }
     }
     setInputValueUnwrapped(next);
@@ -437,7 +451,9 @@ function AriaCombobox(props) {
     }
     if (!nextOpen && queryChangedAfterOpen) {
       if (single) {
-        setCloseQuery(query);
+        if (!inline) {
+          setCloseQuery(query);
+        }
         // Avoid a flicker when closing the popup with an empty query.
         if (query === '') {
           setQueryChangedAfterOpen(false);
@@ -478,17 +494,17 @@ function AriaCombobox(props) {
     if (shouldFillInput) {
       setInputValue((0, _resolveValueLabel.stringifyAsLabel)(nextValue, itemToStringLabel), (0, _createBaseUIEventDetails.createChangeEventDetails)(eventDetails.reason, eventDetails.event));
     }
-    if (single && nextValue != null && eventDetails.reason !== _reasons.REASONS.inputChange && queryChangedAfterOpen) {
+    if (single && nextValue != null && eventDetails.reason !== _reasons.REASONS.inputChange && queryChangedAfterOpen && !inline) {
       setCloseQuery(query);
     }
   });
   const handleSelection = (0, _useStableCallback.useStableCallback)((event, passedValue) => {
-    let value = passedValue;
-    if (value === undefined) {
+    let itemValue = passedValue;
+    if (itemValue === undefined) {
       if (activeIndex === null) {
         return;
       }
-      value = valuesRef.current[activeIndex];
+      itemValue = valuesRef.current[activeIndex];
     }
     const targetEl = (0, _utils.getTarget)(event);
     const overrideEvent = selectionEventRef.current ?? event;
@@ -505,8 +521,8 @@ function AriaCombobox(props) {
     }
     if (multiple) {
       const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const isCurrentlySelected = (0, _itemEquality.itemIncludes)(currentSelectedValue, value, store.state.isItemEqualToValue);
-      const nextValue = isCurrentlySelected ? (0, _itemEquality.removeItem)(currentSelectedValue, value, store.state.isItemEqualToValue) : [...currentSelectedValue, value];
+      const isCurrentlySelected = (0, _itemEquality.selectedValueIncludes)(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? (0, _itemEquality.removeItem)(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
       setSelectedValue(nextValue, eventDetails);
       const wasFiltering = inputRef.current ? inputRef.current.value.trim() !== '' : false;
       if (!wasFiltering) {
@@ -518,7 +534,7 @@ function AriaCombobox(props) {
         setOpen(false, eventDetails);
       }
     } else {
-      setSelectedValue(value, eventDetails);
+      setSelectedValue(itemValue, eventDetails);
       setOpen(false, eventDetails);
     }
   });
@@ -535,7 +551,6 @@ function AriaCombobox(props) {
     setMounted(false);
     onOpenChangeComplete?.(false);
     setQueryChangedAfterOpen(false);
-    resetOpenInteractionType();
     setCloseQuery(null);
     if (selectionMode === 'none') {
       setIndices({
@@ -665,46 +680,19 @@ function AriaCombobox(props) {
       store.set('activeIndex', null);
       return;
     }
-    const nextActiveValue = candidateItems[storeActiveIndex];
-    const lastHighlightedValue = lastHighlightRef.current.value;
-    const isSameItem = lastHighlightedValue !== _constants2.NO_ACTIVE_VALUE && store.state.isItemEqualToValue(nextActiveValue, lastHighlightedValue);
+    const itemValue = candidateItems[storeActiveIndex];
+    const previouslyHighlightedItemValue = lastHighlightRef.current.value;
+    const isSameItem = previouslyHighlightedItemValue !== _constants2.NO_ACTIVE_VALUE && (0, _itemEquality.compareItemEquality)(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
     if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
       lastHighlightRef.current = {
-        value: nextActiveValue,
+        value: itemValue,
         index: storeActiveIndex
       };
-      store.state.onItemHighlighted(nextActiveValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.none, undefined, {
+      store.state.onItemHighlighted(itemValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.none, undefined, {
         index: storeActiveIndex
       }));
     }
   }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
-
-  // When the available items change, ensure the selected value(s) remain valid.
-  // - Single: if current selection is removed, fall back to defaultSelectedValue if it exists in the list; else null.
-  // - Multiple: drop any removed selections.
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!items || selectionMode === 'none') {
-      return;
-    }
-    const registry = flatItems;
-    if (multiple) {
-      const current = Array.isArray(selectedValue) ? selectedValue : _constants.EMPTY_ARRAY;
-      const next = current.filter(v => (0, _itemEquality.itemIncludes)(registry, v, store.state.isItemEqualToValue));
-      if (next.length !== current.length) {
-        setSelectedValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
-      }
-      return;
-    }
-    const isStillPresent = selectedValue == null || (0, _itemEquality.itemIncludes)(registry, selectedValue, store.state.isItemEqualToValue);
-    if (isStillPresent) {
-      return;
-    }
-    let fallback = null;
-    if (defaultSelectedValue != null && (0, _itemEquality.itemIncludes)(registry, defaultSelectedValue, store.state.isItemEqualToValue)) {
-      fallback = defaultSelectedValue;
-    }
-    setSelectedValue(fallback, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none));
-  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, store, setSelectedValue]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -739,12 +727,6 @@ function AriaCombobox(props) {
     } else {
       validation.commit(selectedValue, true);
     }
-    if (multiple && store.state.selectedIndex !== null && (!Array.isArray(selectedValue) || selectedValue.length === 0)) {
-      setIndices({
-        activeIndex: null,
-        selectedIndex: null
-      });
-    }
     if (single && !hasInputValue && !inputInsidePopup) {
       const nextInputValue = (0, _resolveValueLabel.stringifyAsLabel)(selectedValue, itemToStringLabel);
       if (inputValue !== nextInputValue) {
@@ -789,8 +771,11 @@ function AriaCombobox(props) {
   }
   const role = React.useMemo(() => {
     const isPlainInput = inputElement?.tagName === 'INPUT';
-    const shouldApplyAria = isPlainInput || open;
-    const reference = isPlainInput ? {
+    // During SSR and initial hydration, the input ref is not available yet.
+    // Assume an input-like control so combobox ARIA attributes are present.
+    const shouldTreatAsInput = inputElement == null || isPlainInput;
+    const shouldApplyAria = shouldTreatAsInput || open;
+    const reference = shouldTreatAsInput ? {
       autoComplete: 'off',
       spellCheck: 'false',
       autoCorrect: 'off',
@@ -816,7 +801,8 @@ function AriaCombobox(props) {
     toggle: false,
     // Apply a small delay for touch to let iOS viewport centering settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
-    touchOpenDelay: inputInsidePopup ? 0 : 50
+    touchOpenDelay: inputInsidePopup ? 0 : 50,
+    reason: _reasons.REASONS.inputPress
   });
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
     enabled: !readOnly && !disabled && !inline,
@@ -831,7 +817,7 @@ function AriaCombobox(props) {
     bubbles: inline ? true : undefined,
     outsidePress(event) {
       const target = (0, _utils.getTarget)(event);
-      return !(0, _utils.contains)(triggerElement, target) && !(0, _utils.contains)(clearRef.current, target) && !(0, _utils.contains)(chipsContainerRef.current, target);
+      return !(0, _utils.contains)(triggerElement, target) && !(0, _utils.contains)(clearRef.current, target) && !(0, _utils.contains)(chipsContainerRef.current, target) && !(0, _utils.contains)(inputGroupElement, target);
     }
   });
   const listNavigation = (0, _floatingUiReact.useListNavigation)(floatingRootContext, {
@@ -928,9 +914,10 @@ function AriaCombobox(props) {
   const hiddenInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
+    hasItems,
     filteredItems,
     flatFilteredItems
-  }), [query, filteredItems, flatFilteredItems]);
+  }), [query, hasItems, filteredItems, flatFilteredItems]);
   const serializedValue = React.useMemo(() => {
     if (Array.isArray(fieldRawValue)) {
       return '';
@@ -938,6 +925,7 @@ function AriaCombobox(props) {
     return (0, _resolveValueLabel.stringifyAsValue)(fieldRawValue, itemToStringValue);
   }, [fieldRawValue, itemToStringValue]);
   const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
+  const hiddenInputName = multiple || selectionMode === 'none' ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(selectedValue) || !name) {
       return null;
@@ -969,7 +957,7 @@ function AriaCombobox(props) {
             return;
           }
           const nextValue = event.target.value;
-          const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent);
+          const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
             if (multiple) {
@@ -1006,13 +994,15 @@ function AriaCombobox(props) {
           }
         }
       }),
-      name: multiple || selectionMode === 'none' ? undefined : name,
+      id: id && hiddenInputName == null ? `${id}-hidden-input` : undefined,
+      name: hiddenInputName,
+      autoComplete: formAutoComplete,
       disabled: disabled,
       required: required && !hasMultipleSelection,
       readOnly: readOnly,
       value: serializedValue,
       ref: hiddenInputRef,
-      style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
+      style: hiddenInputName ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
       tabIndex: -1,
       "aria-hidden": true
     }), hiddenInputs]