@base-ui/react 1.6.0 → 1.7.0

package/combobox/root/AriaCombobox.mjs

@@ -11,7 +11,8 @@ import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidd
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { Store, useStore } from '@base-ui/utils/store';
 import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { useDismiss, useFloatingRootContext, useListNavigation, useClick } from "../../floating-ui-react/index.mjs";
+import { isHTMLElement } from '@floating-ui/utils/dom';
+import { getOverflowAncestors, useDismiss, useFloatingRootContext, useListNavigation, useClick } from "../../floating-ui-react/index.mjs";
 import { gridNavigation } from "../../floating-ui-react/hooks/gridNavigation.mjs";
 import { contains, getTarget } from "../../floating-ui-react/utils.mjs";
 import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
@@ -23,16 +24,17 @@ import { useFieldRootContext } from "../../internals/field-root-context/FieldRoo
 import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.mjs";
 import { useFormContext } from "../../internals/form-context/FormContext.mjs";
 import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
-import { createCollatorItemFilter, createSingleSelectionCollatorFilter } from "./utils/index.mjs";
+import { createCollatorItemFilter } from "./utils/index.mjs";
 import { useCoreFilter } from "./utils/useFilter.mjs";
 import { useTransitionStatus } from "../../internals/useTransitionStatus.mjs";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.mjs";
+import { isScrollableY } from "../../utils/scrollable.mjs";
 import { useValueChanged } from "../../internals/useValueChanged.mjs";
 import { NOOP } from "../../internals/noop.mjs";
 import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.mjs";
 import { mergeProps } from "../../merge-props/index.mjs";
 import { stringifyAsLabel, stringifyAsValue, isGroupedItems } from "../../internals/resolveValueLabel.mjs";
-import { compareItemEquality, defaultItemEquality, findItemIndex, removeItem, selectedValueIncludes } from "../../internals/itemEquality.mjs";
+import { compareItemEquality, defaultItemEquality, findSelectionIndex, removeItem, selectedValueIncludes } from "../../internals/itemEquality.mjs";
 import { areArraysEqual } from "../../internals/areArraysEqual.mjs";
 import { INITIAL_LAST_HIGHLIGHT, NO_ACTIVE_VALUE } from "./utils/constants.mjs";
 import { useDirection } from "../../internals/direction-context/DirectionContext.mjs";
@@ -52,7 +54,7 @@ export function AriaCombobox(props) {
     inputValue: inputValueProp,
     open: openProp,
     defaultOpen = false,
-    selectionMode = 'none',
+    selectionMode,
     onItemHighlighted: onItemHighlightedProp,
     name: nameProp,
     form,
@@ -125,12 +127,10 @@ export function AriaCombobox(props) {
    */
   const valuesRef = React.useRef([]);
   /**
-   * Contains all item values in a stable, unfiltered order.
-   * This is only used when `items` prop is not provided.
-   * It accumulates values on first mount and does not remove them on unmount due to
-   * filtering, providing a stable index for selected value tracking.
+   * The item element that received the last `pointerdown`, used to detect whether a
+   * `mouseup` on an item belongs to a drag-select gesture that started elsewhere.
    */
-  const allValuesRef = React.useRef([]);
+  const pointerDownItemRef = React.useRef(null);
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
   const multiple = selectionMode === 'multiple';
@@ -157,11 +157,10 @@ export function AriaCombobox(props) {
     if (filterProp !== undefined) {
       return filterProp;
     }
-    if (single && !queryChangedAfterOpen) {
-      return createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue);
-    }
+    // `shouldBypassFiltering` already empties the query whenever a single selection's label
+    // matches it exactly, so the filter never needs a selection-aware variant here.
     return createCollatorItemFilter(collatorFilter, itemToStringLabel);
-  }, [filterProp, single, selectedValue, queryChangedAfterOpen, collatorFilter, itemToStringLabel]);
+  }, [filterProp, collatorFilter, itemToStringLabel]);
 
   // If neither inputValue nor defaultInputValue are provided, derive it from the
   // selected value for single mode so the input reflects the selection on mount.
@@ -187,9 +186,9 @@ export function AriaCombobox(props) {
     state: 'open'
   });
   const isGrouped = isGroupedItems(items);
-  const query = closeQuery ?? (inputValue === '' ? '' : String(inputValue).trim());
+  const query = closeQuery ?? String(inputValue).trim();
   const selectedLabelString = single ? stringifyAsLabel(selectedValue, itemToStringLabel) : '';
-  const shouldBypassFiltering = single && !queryChangedAfterOpen && query !== '' && selectedLabelString !== '' && selectedLabelString.length === query.length && collatorFilter.contains(selectedLabelString, query);
+  const shouldBypassFiltering = single && !queryChangedAfterOpen && query !== '' && selectedLabelString.length === query.length && collatorFilter.contains(selectedLabelString, query);
   const filterQuery = shouldBypassFiltering ? '' : query;
   const shouldIgnoreExternalFiltering = hasItems && hasFilteredItemsProp && shouldBypassFiltering;
   const flatItems = React.useMemo(() => {
@@ -216,12 +215,18 @@ export function AriaCombobox(props) {
         if (limit > -1 && currentCount >= limit) {
           break;
         }
-        const candidateItems = filterQuery === '' ? group.items : group.items.filter(item => filter(item, filterQuery, itemToStringLabel));
-        if (candidateItems.length === 0) {
-          continue;
-        }
         const remainingLimit = limit > -1 ? limit - currentCount : Infinity;
-        const itemsToTake = candidateItems.slice(0, remainingLimit);
+        const itemsToTake = filterQuery === '' ? group.items.slice(0, remainingLimit) : [];
+        if (filterQuery !== '') {
+          for (const item of group.items) {
+            if (itemsToTake.length >= remainingLimit) {
+              break;
+            }
+            if (filter(item, filterQuery, itemToStringLabel)) {
+              itemsToTake.push(item);
+            }
+          }
+        }
         if (itemsToTake.length > 0) {
           const newGroup = {
             ...group,
@@ -261,76 +266,85 @@ export function AriaCombobox(props) {
     }
     return filteredItems;
   }, [filteredItems, isGrouped]);
-  const store = useRefWithInit(() => new Store({
-    id,
-    labelId: undefined,
-    selectedValue,
-    open,
-    filter,
-    query,
-    items,
-    selectionMode,
-    listRef,
-    labelsRef,
-    popupRef,
-    emptyRef,
-    inputRef,
-    startDismissRef,
-    endDismissRef,
-    keyboardActiveRef,
-    chipsContainerRef,
-    clearRef,
-    valuesRef,
-    allValuesRef,
-    selectionEventRef,
-    name,
-    form,
-    disabled,
-    readOnly,
-    required,
-    grid,
-    isGrouped,
-    virtualized,
-    openOnInputClick,
-    itemToStringLabel,
-    isItemEqualToValue,
-    modal,
-    autoHighlight: autoHighlightMode,
-    submitOnItemClick,
-    hasInputValue,
-    mounted: false,
-    forceMounted: false,
-    transitionStatus: 'idle',
-    inline: inlineProp,
-    activeIndex: null,
-    selectedIndex: null,
-    popupProps: {},
-    inputProps: {},
-    triggerProps: {},
-    itemProps: EMPTY_OBJECT,
-    positionerElement: null,
-    listElement: null,
-    popupId: undefined,
-    triggerElement: null,
-    inputElement: null,
-    inputGroupElement: null,
-    popupSide: null,
-    openMethod: null,
-    inputInsidePopup: true,
-    // Avoid duplicate names in the server HTML. Popup inputs aren't rendered
-    // until after hydration, so the hidden input takes over then if needed.
-    inputOwnsFormValue: selectionMode === 'none',
-    onOpenChangeComplete: onOpenChangeCompleteProp || NOOP,
-    // Placeholder callbacks replaced on first render
-    setOpen: NOOP,
-    setInputValue: NOOP,
-    setSelectedValue: NOOP,
-    setIndices: NOOP,
-    onItemHighlighted: NOOP,
-    handleSelection: NOOP,
-    forceMount: NOOP,
-    requestSubmit: NOOP
-  })).current;
+  const store = useRefWithInit(() => {
+    // An inline list open on the first render never gets a closed pass of the closed-state
+    // sync effect below, and `items`-prop lists don't self-register their index the way
+    // individually rendered `<Combobox.Item>`s do, so the selected item was never highlighted.
+    // Seeding the index here lets list navigation highlight and scroll to the selection on
+    // mount. Computed once by construction, so a selection or list that resolves after mount
+    // doesn't move an existing highlight or scroll the list away.
+    let initialSelectedIndex = null;
+    if (inlineProp && open && hasItems && selectionMode !== 'none') {
+      initialSelectedIndex = findSelectionIndex(flatFilteredItems, selectedValue, isItemEqualToValue, multiple);
+    }
+    return new Store({
+      id,
+      labelId: undefined,
+      selectedValue,
+      open,
+      items,
+      selectionMode,
+      listRef,
+      labelsRef,
+      popupRef,
+      emptyRef,
+      inputRef,
+      startDismissRef,
+      endDismissRef,
+      keyboardActiveRef,
+      chipsContainerRef,
+      clearRef,
+      valuesRef,
+      pointerDownItemRef,
+      selectionEventRef,
+      name,
+      form,
+      disabled,
+      readOnly,
+      required,
+      grid,
+      virtualized,
+      openOnInputClick,
+      itemToStringLabel,
+      isItemEqualToValue,
+      modal,
+      autoHighlight: autoHighlightMode,
+      submitOnItemClick,
+      hasInputValue,
+      mounted: false,
+      forceMounted: false,
+      transitionStatus: 'idle',
+      inline: inlineProp,
+      activeIndex: null,
+      selectedIndex: initialSelectedIndex,
+      popupProps: {},
+      listProps: {},
+      inputProps: {},
+      triggerProps: {},
+      itemProps: EMPTY_OBJECT,
+      positionerElement: null,
+      listElement: null,
+      popupId: undefined,
+      triggerElement: null,
+      inputElement: null,
+      inputGroupElement: null,
+      popupSide: null,
+      openMethod: null,
+      inputInsidePopup: true,
+      // Avoid duplicate names in the server HTML. Popup inputs aren't rendered
+      // until after hydration, so the hidden input takes over then if needed.
+      inputOwnsFormValue: selectionMode === 'none',
+      // Placeholder callbacks replaced on first render
+      onOpenChangeComplete: NOOP,
+      setOpen: NOOP,
+      setInputValue: NOOP,
+      setSelectedValue: NOOP,
+      setIndices: NOOP,
+      handleSelection: NOOP,
+      forceMount: NOOP,
+      requestSubmit: NOOP
+    });
+  }).current;
   const fieldRawValue = selectionMode === 'none' ? inputValue : selectedValue;
   const fieldStringValue = React.useMemo(() => {
     if (selectionMode === 'none') {
@@ -373,35 +387,38 @@ export function AriaCombobox(props) {
       store.set('forceMounted', true);
     }
   });
-  const initialSelectedValueRef = React.useRef(selectedValue);
-  useIsoLayoutEffect(() => {
-    // Ensure the values and labels are registered for programmatic value changes.
-    if (selectedValue !== initialSelectedValueRef.current) {
-      forceMount();
+
+  /**
+   * Emits `onItemHighlighted` for the item at `index`, or clears the highlight when `index` is `-1`
+   * (a no-op if nothing was highlighted). Keeps `lastHighlightRef` in sync with what was emitted.
+   */
+  const emitHighlight = useStableCallback((value, index, type) => {
+    if (index === -1) {
+      if (lastHighlightRef.current === INITIAL_LAST_HIGHLIGHT) {
+        return;
+      }
+      lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+    } else {
+      lastHighlightRef.current = {
+        value,
+        index
+      };
     }
-  }, [forceMount, selectedValue]);
+    onItemHighlighted(value, createGenericEventDetails(type, undefined, {
+      index
+    }));
+  });
   const setIndices = useStableCallback(options => {
     store.update(options);
-    const type = options.type || 'none';
-    if (options.activeIndex === undefined) {
+    const activeIndexOption = options.activeIndex;
+    if (activeIndexOption === undefined) {
       return;
     }
-    if (options.activeIndex === null) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        onItemHighlighted(undefined, createGenericEventDetails(type, undefined, {
-          index: -1
-        }));
-      }
+    const type = options.type || REASONS.none;
+    if (activeIndexOption === null) {
+      emitHighlight(undefined, -1, type);
     } else {
-      const activeValue = valuesRef.current[options.activeIndex];
-      lastHighlightRef.current = {
-        value: activeValue,
-        index: options.activeIndex
-      };
-      onItemHighlighted(activeValue, createGenericEventDetails(type, undefined, {
-        index: options.activeIndex
-      }));
+      emitHighlight(valuesRef.current[activeIndexOption], activeIndexOption, type);
     }
   });
   const setInputValue = useStableCallback((next, eventDetails) => {
@@ -414,6 +431,11 @@ export 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.inputChange) {
+      // A controlled popup may ignore a close request. Resuming input proves the popup
+      // is remaining open, so release the query captured for an exit animation.
+      if (open && closeQuery !== null) {
+        setCloseQuery(null);
+      }
       const event = eventDetails.event;
       const inputType = event.inputType;
       // Treat composition commits as typed input; autofill may omit `inputType` or
@@ -429,10 +451,34 @@ export function AriaCombobox(props) {
         pendingQueryHighlightRef.current = {
           hasQuery
         };
-        if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
+
+        // Virtualized lists own their scroller. Reset regular lists directly so a stale
+        // composite registry cannot select a reordered item and scrolling cannot escape
+        // the popup.
+        const list = store.state.listElement;
+        if (!store.state.virtualized && list) {
+          const popup = popupRef.current;
+          for (const ancestor of getOverflowAncestors(list.firstElementChild ?? list)) {
+            if (!isHTMLElement(ancestor) || (popup ? !contains(popup, ancestor) : ancestor.getAttribute('role') === 'dialog')) {
+              break;
+            }
+            if (isScrollableY(ancestor)) {
+              ancestor.scrollTop = 0;
+              break;
+            }
+          }
+        }
+        if (hasQuery && autoHighlightMode && store.state.activeIndex == null && (open || inline)) {
           store.set('activeIndex', 0);
         }
       }
+    } else if (eventDetails.reason === REASONS.inputClear && next === '' && store.state.inputInsidePopup) {
+      // A programmatic clear of an active query (e.g. after selecting an item with the
+      // input inside the popup): restore the highlight to the selected item.
+      pendingQueryHighlightRef.current = {
+        hasQuery: false,
+        selection: true
+      };
     }
     setInputValueUnwrapped(next);
   });
@@ -444,7 +490,7 @@ export function AriaCombobox(props) {
     // If the `Empty` component is not used, the positioner or popup should be hidden
     // with CSS. In this case, allow the Escape key to bubble to close a parent popup
     // if there are no items to show.
-    if (eventDetails.reason === 'escape-key' && hasItems && flatFilteredItems.length === 0 && !store.state.emptyRef.current) {
+    if (eventDetails.reason === REASONS.escapeKey && hasItems && flatFilteredItems.length === 0 && !emptyRef.current) {
       eventDetails.allowPropagation();
     }
     props.onOpenChange?.(nextOpen, eventDetails);
@@ -454,10 +500,10 @@ export function AriaCombobox(props) {
 
     // If reopening interrupts the close animation, handleUnmount won't run to clear the
     // frozen closeQuery and pending popup input.
-    if (nextOpen && multiple && inputInsidePopup && !inline && closeQuery !== null) {
+    if (nextOpen && inputInsidePopup && !inline && closeQuery !== null) {
       setQueryChangedAfterOpen(false);
       setCloseQuery(null);
-      if (inputValue !== '') {
+      if (inputValue !== '' && eventDetails.reason !== REASONS.inputChange) {
         setInputValue('', createChangeEventDetails(REASONS.inputClear, eventDetails.event));
       }
     }
@@ -511,18 +557,8 @@ export function AriaCombobox(props) {
     if (shouldFillInput) {
       setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), createChangeEventDetails(eventDetails.reason, eventDetails.event));
     }
-    if (single && nextValue != null && eventDetails.reason !== REASONS.inputChange && queryChangedAfterOpen && !inline) {
-      setCloseQuery(query);
-    }
   });
-  const handleSelection = useStableCallback((event, passedValue) => {
-    let itemValue = passedValue;
-    if (itemValue === undefined) {
-      if (activeIndex === null) {
-        return;
-      }
-      itemValue = valuesRef.current[activeIndex];
-    }
+  const handleSelection = useStableCallback((event, itemValue) => {
     const targetEl = getTarget(event);
     const overrideEvent = selectionEventRef.current ?? event;
     selectionEventRef.current = null;
@@ -538,8 +574,8 @@ export function AriaCombobox(props) {
     }
     if (multiple) {
       const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, store.state.isItemEqualToValue);
-      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, store.state.isItemEqualToValue) : [...currentSelectedValue, itemValue];
+      const isCurrentlySelected = selectedValueIncludes(currentSelectedValue, itemValue, isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, itemValue, isItemEqualToValue) : [...currentSelectedValue, itemValue];
       setSelectedValue(nextValue, eventDetails);
       if (eventDetails.isCanceled) {
         return;
@@ -562,9 +598,6 @@ export function AriaCombobox(props) {
     }
   });
   const requestSubmit = useStableCallback(() => {
-    if (!store.state.submitOnItemClick) {
-      return;
-    }
     const formElement = validation.inputRef.current?.form ?? store.state.inputElement?.form;
     if (formElement && typeof formElement.requestSubmit === 'function') {
       formElement.requestSubmit();
@@ -637,25 +670,29 @@ export function AriaCombobox(props) {
   React.useImperativeHandle(props.actionsRef, () => ({
     unmount: handleUnmount
   }), [handleUnmount]);
-  useIsoLayoutEffect(function syncSelectedIndex() {
-    if (open || selectionMode === 'none') {
+  useIsoLayoutEffect(function syncClosedState() {
+    if (open) {
       return;
     }
-    const registry = items ? flatItems : allValuesRef.current;
-    if (multiple) {
-      const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
-      const lastValue = currentValue[currentValue.length - 1];
-      const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
-      setIndices({
-        selectedIndex: lastIndex === -1 ? null : lastIndex
-      });
-    } else {
-      const index = findItemIndex(registry, selectedValue, isItemEqualToValue);
-      setIndices({
-        selectedIndex: index === -1 ? null : index
-      });
+
+    // State-driven (not tied to the internal event path) so controlled closes
+    // also clear a pointerdown that never received a matching item mouseup.
+    pointerDownItemRef.current = null;
+    if (selectionMode === 'none') {
+      return;
     }
-  }, [open, selectedValue, items, selectionMode, flatItems, multiple, isItemEqualToValue, setIndices]);
+
+    // Without `items`, look the selection up in the live registry of mounted item
+    // values (the list stays mounted while closed when closed-state features need
+    // it — trigger interaction and rendered-label autofill force-mount it). Mounted
+    // items re-assert the index themselves when their registration moves; when
+    // nothing is mounted the lookup resolves to `null` and each item re-registers
+    // the index on the next open.
+    const registry = hasItems ? flatItems : valuesRef.current;
+    setIndices({
+      selectedIndex: findSelectionIndex(registry, selectedValue, isItemEqualToValue, multiple)
+    });
+  }, [open, selectedValue, selectionMode, multiple, hasItems, flatItems, isItemEqualToValue, setIndices]);
   useIsoLayoutEffect(() => {
     if (items) {
       valuesRef.current = flatFilteredItems;
@@ -665,14 +702,52 @@ export function AriaCombobox(props) {
   useIsoLayoutEffect(() => {
     const pendingHighlight = pendingQueryHighlightRef.current;
     if (pendingHighlight) {
+      // A directly rendered list remains visible when the popup state is closed, while a
+      // kept-mounted Positioner is hidden and should stay inert.
+      const listIsNavigable = open || inline || store.state.positionerElement?.hidden === false;
       if (pendingHighlight.hasQuery) {
-        if (autoHighlightMode) {
+        if (autoHighlightMode && listIsNavigable) {
           store.set('activeIndex', 0);
         }
-      } else if (autoHighlightMode === 'always') {
-        store.set('activeIndex', 0);
+        pendingQueryHighlightRef.current = null;
+      } else if (String(inputValue).trim() === '') {
+        // Only handle the clear once it has committed (a controlled input may reject it),
+        // so a restore cannot fire while a query is still active.
+        pendingQueryHighlightRef.current = null;
+        if (listIsNavigable) {
+          const clearedBySelection = pendingHighlight.selection;
+          if (autoHighlightMode === 'always' && !clearedBySelection && store.state.selectionMode === 'none') {
+            // There is no selection to restore in Autocomplete. Keep the first-item reset
+            // synchronous so list navigation sees it before a directly rendered list closes.
+            store.set('activeIndex', 0);
+          }
+
+          // Items re-mounted by the clear publish their composite indices in a follow-up
+          // commit, so the item registries are mid-update here. Defer past React's cascade.
+          queueMicrotask(() => {
+            if (!store.state.open && !store.state.inline || inputRef.current && inputRef.current.value.trim() !== '') {
+              return;
+            }
+
+            // Return the highlight to the selected item, the same anchor the popup uses
+            // when it first opens. Read the selection through the store so consumers can
+            // pass an inline `isItemEqualToValue` or a fresh `selectedValue` array without
+            // re-running this effect on every render.
+            const currentSelectedValue = store.state.selectedValue;
+            const isMultiple = store.state.selectionMode === 'multiple';
+            const lastSelectedValue = isMultiple && Array.isArray(currentSelectedValue) ? currentSelectedValue[currentSelectedValue.length - 1] : currentSelectedValue;
+            const hasSelection = store.state.selectionMode !== 'none' && lastSelectedValue != null;
+            if (hasSelection || clearedBySelection) {
+              const registry = hasItems || hasFilteredItemsProp ? flatFilteredItems : valuesRef.current;
+              // A selection that is no longer in the list drops the highlight rather than
+              // leaving it on whichever item now occupies that index.
+              store.set('activeIndex', hasSelection ? findSelectionIndex(registry, currentSelectedValue, store.state.isItemEqualToValue, isMultiple) : null);
+            } else if (autoHighlightMode === 'always') {
+              store.set('activeIndex', 0);
+            }
+          });
+        }
       }
-      pendingQueryHighlightRef.current = null;
     }
     if (!open && !inline) {
       return;
@@ -685,21 +760,11 @@ export function AriaCombobox(props) {
         store.set('activeIndex', 0);
         return;
       }
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, createGenericEventDetails(REASONS.none, undefined, {
-          index: -1
-        }));
-      }
+      emitHighlight(undefined, -1, REASONS.none);
       return;
     }
     if (storeActiveIndex >= candidateItems.length) {
-      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
-        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, createGenericEventDetails(REASONS.none, undefined, {
-          index: -1
-        }));
-      }
+      emitHighlight(undefined, -1, REASONS.none);
       store.set('activeIndex', null);
       return;
     }
@@ -707,15 +772,12 @@ export function AriaCombobox(props) {
     const previouslyHighlightedItemValue = lastHighlightRef.current.value;
     const isSameItem = previouslyHighlightedItemValue !== NO_ACTIVE_VALUE && compareItemEquality(itemValue, previouslyHighlightedItemValue, store.state.isItemEqualToValue);
     if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
-      lastHighlightRef.current = {
-        value: itemValue,
-        index: storeActiveIndex
-      };
-      store.state.onItemHighlighted(itemValue, createGenericEventDetails(REASONS.none, undefined, {
-        index: storeActiveIndex
-      }));
+      emitHighlight(itemValue, storeActiveIndex, REASONS.none);
     }
-  }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
+  }, [activeIndex, autoHighlightMode, emitHighlight, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store,
+  // Reruns the effect when the query changes without affecting the deps above, such as
+  // clearing the input when no items are filtered out (individually rendered items).
+  inputValue]);
   useIsoLayoutEffect(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
@@ -746,6 +808,12 @@ export function AriaCombobox(props) {
     }
     setQueryChangedAfterOpen(true);
   });
+  function syncInputToSelectedLabel() {
+    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
+    if (inputValue !== nextInputValue) {
+      setInputValue(nextInputValue, createChangeEventDetails(REASONS.none));
+    }
+  }
   useValueChanged(selectedValue, () => {
     if (selectionMode === 'none') {
       return;
@@ -754,10 +822,7 @@ export function AriaCombobox(props) {
     setDirty(isSelectedValueDirty(selectedValue));
     validation.change(selectedValue);
     if (single && !hasInputValue && !inputInsidePopup) {
-      const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
-      if (inputValue !== nextInputValue) {
-        setInputValue(nextInputValue, createChangeEventDetails(REASONS.none));
-      }
+      syncInputToSelectedLabel();
     }
   });
   useValueChanged(inputValue, () => {
@@ -772,10 +837,7 @@ export function AriaCombobox(props) {
     if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
       return;
     }
-    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
-    if (inputValue !== nextInputValue) {
-      setInputValue(nextInputValue, createChangeEventDetails(REASONS.none));
-    }
+    syncInputToSelectedLabel();
   });
   const floatingRootContext = useFloatingRootContext({
     open: inline ? true : open,
@@ -785,18 +847,19 @@ export function AriaCombobox(props) {
       floating: positionerElement
     }
   });
-  let ariaHasPopup;
-  let ariaExpanded;
-  if (!inline) {
-    ariaHasPopup = grid ? 'grid' : 'listbox';
-    ariaExpanded = open ? 'true' : 'false';
-  }
+  const ariaHasPopup = grid ? 'grid' : 'listbox';
+  // An inline list isn't gated on `open`: it renders for as long as it's in the tree, so the
+  // combobox is permanently expanded even while the internal open state is `false`.
+  const expanded = open || inline;
+  const ariaExpanded = expanded ? 'true' : 'false';
   const role = React.useMemo(() => {
     const isPlainInput = inputElement?.tagName === 'INPUT';
     // 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;
+    // A non-input control only takes on combobox semantics while the list is exposed, which for
+    // an inline list is the whole time.
+    const shouldApplyAria = shouldTreatAsInput || expanded;
     const reference = shouldTreatAsInput ? {
       autoComplete: 'off',
       spellCheck: 'false',
@@ -807,7 +870,7 @@ export function AriaCombobox(props) {
       reference.role = 'combobox';
       reference['aria-expanded'] = ariaExpanded;
       reference['aria-haspopup'] = ariaHasPopup;
-      reference['aria-controls'] = open ? listElement?.id : undefined;
+      reference['aria-controls'] = expanded ? listElement?.id : undefined;
       reference['aria-autocomplete'] = autoComplete;
     }
     return {
@@ -816,7 +879,7 @@ export function AriaCombobox(props) {
         role: 'presentation'
       }
     };
-  }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
+  }, [inputElement, expanded, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
   const click = useClick(floatingRootContext, {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
@@ -870,7 +933,7 @@ export function AriaCombobox(props) {
       } else {
         setIndices({
           activeIndex: nextActiveIndex,
-          type: keyboardActiveRef.current ? 'keyboard' : 'pointer'
+          type: keyboardActiveRef.current ? REASONS.keyboard : REASONS.pointer
         });
       }
     }
@@ -885,7 +948,8 @@ export function AriaCombobox(props) {
       }
     }
   }, dismiss.reference, click.reference, role.reference), [listNavigation.reference, dismiss.reference, click.reference, role.reference, grid, store]);
-  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, listNavigation.floating, dismiss.floating, role.floating), [listNavigation.floating, dismiss.floating, role.floating]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, dismiss.floating), [dismiss.floating]);
+  const listProps = React.useMemo(() => mergeProps(listNavigation.floating, role.floating), [listNavigation.floating, role.floating]);
   const itemProps = React.useMemo(() => {
     const listNavigationItemProps = listNavigation.item;
     if (!listNavigationItemProps) {
@@ -903,6 +967,7 @@ export function AriaCombobox(props) {
     store.update({
       inline: inlineProp,
       popupProps,
+      listProps,
       inputProps,
       triggerProps,
       itemProps,
@@ -910,10 +975,10 @@ export function AriaCombobox(props) {
       setInputValue,
       setSelectedValue,
       setIndices,
-      onItemHighlighted,
       handleSelection,
       forceMount,
-      requestSubmit
+      requestSubmit,
+      onOpenChangeComplete
     });
   });
   useIsoLayoutEffect(() => {
@@ -926,6 +991,7 @@ export function AriaCombobox(props) {
       items,
       inline: inlineProp,
       popupProps,
+      listProps,
       inputProps,
       triggerProps,
       openMethod,
@@ -937,9 +1003,7 @@ export function AriaCombobox(props) {
       readOnly,
       required,
       grid,
-      isGrouped,
       virtualized,
-      onOpenChangeComplete,
       openOnInputClick,
       itemToStringLabel,
       modal,
@@ -947,10 +1011,9 @@ export function AriaCombobox(props) {
       isItemEqualToValue,
       submitOnItemClick,
       hasInputValue,
-      requestSubmit,
       inputOwnsFormValue: selectionMode === 'none' && (inlineProp || !store.state.inputInsidePopup)
     });
-  }, [store, id, selectedValue, open, mounted, transitionStatus, items, popupProps, inputProps, itemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode, form]);
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, popupProps, listProps, inputProps, itemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, grid, virtualized, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, autoHighlightMode, form]);
   const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
   const itemsContextValue = React.useMemo(() => ({
     query,
@@ -994,7 +1057,7 @@ export function AriaCombobox(props) {
         },
         // Handle browser autofill.
         onChange(event) {
-          // Workaround for https://github.com/facebook/react/issues/9023
+          // Workaround for https://github.com/react/react/issues/9023
           if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
             return;
           }