@base-ui/react 1.1.0 → 1.3.0

package/combobox/chip-remove/ComboboxChipRemove.js

@@ -46,61 +46,56 @@ const ComboboxChipRemove = exports.ComboboxChipRemove = /*#__PURE__*/React.forwa
     disabled: disabled || readOnly,
     focusableWhenDisabled: true
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
+  function clearActiveIndexForRemovedItem(removedItem) {
+    const activeIndex = store.state.activeIndex;
+    if (activeIndex == null) {
+      return;
+    }
+
+    // Try current visible list first; if not found, it's filtered out.
+    // No need to clear highlight in that case since it can't equal activeIndex.
+    const removedIndex = (0, _itemEquality.findItemIndex)(store.state.valuesRef.current, removedItem, isItemEqualToValue);
+    if (removedIndex !== -1 && activeIndex === removedIndex) {
+      store.state.setIndices({
+        activeIndex: null,
+        type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
+      });
+    }
+  }
+  function removeChip(event) {
+    const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.chipRemovePress, event.nativeEvent);
+    const removedItem = selectedValue[index];
+    clearActiveIndexForRemovedItem(removedItem);
+    store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+    store.state.inputRef.current?.focus();
+    return eventDetails;
+  }
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, buttonRef],
     state,
     props: [{
       tabIndex: -1,
-      'aria-readonly': readOnly || undefined,
       onClick(event) {
         if (disabled || readOnly) {
           return;
         }
-        const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.chipRemovePress, event.nativeEvent);
-
-        // If the removed chip was the active item, clear highlight
-        const activeIndex = store.state.activeIndex;
-        const removedItem = selectedValue[index];
-
-        // Try current visible list first; if not found, it's filtered out. No need
-        // to clear highlight in that case since it can't equal activeIndex.
-        const removedIndex = (0, _itemEquality.findItemIndex)(store.state.valuesRef.current, removedItem, isItemEqualToValue);
-        if (removedIndex !== -1 && activeIndex === removedIndex) {
-          store.state.setIndices({
-            activeIndex: null,
-            type: store.state.keyboardActiveRef.current ? 'pointer' : 'keyboard'
-          });
-        }
-        store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+        const eventDetails = removeChip(event);
         if (!eventDetails.isPropagationAllowed) {
           event.stopPropagation();
         }
-        store.state.inputRef.current?.focus();
       },
       onKeyDown(event) {
         if (disabled || readOnly) {
           return;
         }
-        const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.chipRemovePress, event.nativeEvent);
         if (event.key === 'Enter' || event.key === ' ') {
-          // If the removed chip was the active item, clear highlight
-          const activeIndex = store.state.activeIndex;
-          const removedItem = selectedValue[index];
-          const removedIndex = (0, _itemEquality.findItemIndex)(store.state.valuesRef.current, removedItem, isItemEqualToValue);
-          if (removedIndex !== -1 && activeIndex === removedIndex) {
-            store.state.setIndices({
-              activeIndex: null,
-              type: store.state.keyboardActiveRef.current ? 'pointer' : 'keyboard'
-            });
-          }
-          store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
+          const eventDetails = removeChip(event);
           if (!eventDetails.isPropagationAllowed) {
             (0, _utils.stopEvent)(event);
           }
-          store.state.inputRef.current?.focus();
         }
       }
     }, elementProps, getButtonProps]

package/combobox/chips/ComboboxChips.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipsState {}
-export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChips.State> {}
+export interface ComboboxChipsProps extends BaseUIComponentProps<'div', ComboboxChipsState> {}
 export declare namespace ComboboxChips {
   type State = ComboboxChipsState;
   type Props = ComboboxChipsProps;

package/combobox/chips/ComboboxChipsContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/combobox/clear/ComboboxClear.d.ts

@@ -15,19 +15,22 @@ export interface ComboboxClearState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxClear.State> {
+export interface ComboboxClearProps extends NativeButtonProps, BaseUIComponentProps<'button', ComboboxClearState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the component should remain mounted in the DOM when not visible.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxClear {
   type State = ComboboxClearState;

package/combobox/clear/ComboboxClear.js

@@ -69,11 +69,11 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(visible);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open,
     transitionStatus
-  }), [disabled, open, transitionStatus]);
+  };
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: visible,
     ref: store.state.clearRef,
@@ -89,7 +89,6 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
     props: [{
       tabIndex: -1,
       children: 'x',
-      'aria-readonly': readOnly || undefined,
       // Avoid stealing focus from the input.
       onMouseDown(event) {
         event.preventDefault();

package/combobox/collection/ComboboxCollection.d.ts

@@ -6,9 +6,11 @@ import * as React from 'react';
  * If rendering a flat list, pass a function child to the `List` component instead, which implicitly wraps it.
  */
 export declare function ComboboxCollection(props: ComboboxCollection.Props): React.JSX.Element | null;
+export interface ComboboxCollectionState {}
 export interface ComboboxCollectionProps {
   children: (item: any, index: number) => React.ReactNode;
 }
 export declare namespace ComboboxCollection {
+  type State = ComboboxCollectionState;
   type Props = ComboboxCollectionProps;
 }

package/combobox/empty/ComboboxEmpty.d.ts

@@ -8,7 +8,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<ComboboxEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxEmptyState {}
-export interface ComboboxEmptyProps extends BaseUIComponentProps<'div', ComboboxEmpty.State> {}
+export interface ComboboxEmptyProps extends BaseUIComponentProps<'div', ComboboxEmptyState> {}
 export declare namespace ComboboxEmpty {
   type State = ComboboxEmptyState;
   type Props = ComboboxEmptyProps;

package/combobox/group/ComboboxGroup.d.ts

@@ -6,12 +6,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<ComboboxGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupState {}
-export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroup.State> {
+export interface ComboboxGroupProps extends BaseUIComponentProps<'div', ComboboxGroupState> {
   /**
    * Items to be rendered within this group.
    * When provided, child `Collection` components will use these items.
    */
-  items?: readonly any[];
+  items?: readonly any[] | undefined;
 }
 export declare namespace ComboboxGroup {
   type State = ComboboxGroupState;

package/combobox/group/ComboboxGroupContext.d.ts

@@ -6,7 +6,7 @@ export interface ComboboxGroupContext {
    * Optional list of items that belong to this group. Used by nested
    * collections to render group-specific items.
    */
-  items?: readonly any[];
+  items?: readonly any[] | undefined;
 }
 export declare const ComboboxGroupContext: React.Context<ComboboxGroupContext | undefined>;
 export declare function useComboboxGroupContext(): ComboboxGroupContext;

package/combobox/group/ComboboxGroupContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/combobox/group-label/ComboboxGroupLabel.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const ComboboxGroupLabel: React.ForwardRefExoticComponent<Omit<ComboboxGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxGroupLabelState {}
-export interface ComboboxGroupLabelProps extends BaseUIComponentProps<'div', ComboboxGroupLabel.State> {}
+export interface ComboboxGroupLabelProps extends BaseUIComponentProps<'div', ComboboxGroupLabelState> {}
 export declare namespace ComboboxGroupLabel {
   type State = ComboboxGroupLabelState;
   type Props = ComboboxGroupLabelProps;

package/combobox/icon/ComboboxIcon.d.ts

@@ -4,9 +4,9 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * An icon that indicates that the trigger button opens the popup.
  * Renders a `<span>` element.
  */
-export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ComboboxIcon: React.ForwardRefExoticComponent<Omit<ComboboxIconProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxIconState {}
-export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIcon.State> {}
+export interface ComboboxIconProps extends BaseUIComponentProps<'span', ComboboxIconState> {}
 export declare namespace ComboboxIcon {
   type State = ComboboxIconState;
   type Props = ComboboxIconProps;

package/combobox/index.d.ts

@@ -1,7 +1,9 @@
 export * as Combobox from "./index.parts.js";
 export type * from "./root/ComboboxRoot.js";
+export type * from "./label/ComboboxLabel.js";
 export type * from "./trigger/ComboboxTrigger.js";
 export type * from "./input/ComboboxInput.js";
+export type * from "./input-group/ComboboxInputGroup.js";
 export type * from "./popup/ComboboxPopup.js";
 export type * from "./positioner/ComboboxPositioner.js";
 export type * from "./list/ComboboxList.js";

package/combobox/index.parts.d.ts

@@ -1,6 +1,8 @@
 export { ComboboxRoot as Root } from "./root/ComboboxRoot.js";
+export { ComboboxLabel as Label } from "./label/ComboboxLabel.js";
 export { ComboboxValue as Value } from "./value/ComboboxValue.js";
 export { ComboboxInput as Input } from "./input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "./input-group/ComboboxInputGroup.js";
 export { ComboboxTrigger as Trigger } from "./trigger/ComboboxTrigger.js";
 export { ComboboxList as List } from "./list/ComboboxList.js";
 export { ComboboxStatus as Status } from "./status/ComboboxStatus.js";
@@ -22,4 +24,5 @@ export { ComboboxCollection as Collection } from "./collection/ComboboxCollectio
 export { ComboboxEmpty as Empty } from "./empty/ComboboxEmpty.js";
 export { ComboboxClear as Clear } from "./clear/ComboboxClear.js";
 export { Separator } from "../separator/index.js";
-export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useComboboxFilter as useFilter } from "./root/utils/useFilter.js";
+export { useFilteredItems } from "./root/utils/useFilteredItems.js";

package/combobox/index.parts.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "Input", {
     return _ComboboxInput.ComboboxInput;
   }
 });
+Object.defineProperty(exports, "InputGroup", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxInputGroup.ComboboxInputGroup;
+  }
+});
 Object.defineProperty(exports, "Item", {
   enumerable: true,
   get: function () {
@@ -87,6 +93,12 @@ Object.defineProperty(exports, "ItemIndicator", {
     return _ComboboxItemIndicator.ComboboxItemIndicator;
   }
 });
+Object.defineProperty(exports, "Label", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxLabel.ComboboxLabel;
+  }
+});
 Object.defineProperty(exports, "List", {
   enumerable: true,
   get: function () {
@@ -153,9 +165,17 @@ Object.defineProperty(exports, "useFilter", {
     return _useFilter.useComboboxFilter;
   }
 });
+Object.defineProperty(exports, "useFilteredItems", {
+  enumerable: true,
+  get: function () {
+    return _useFilteredItems.useFilteredItems;
+  }
+});
 var _ComboboxRoot = require("./root/ComboboxRoot");
+var _ComboboxLabel = require("./label/ComboboxLabel");
 var _ComboboxValue = require("./value/ComboboxValue");
 var _ComboboxInput = require("./input/ComboboxInput");
+var _ComboboxInputGroup = require("./input-group/ComboboxInputGroup");
 var _ComboboxTrigger = require("./trigger/ComboboxTrigger");
 var _ComboboxList = require("./list/ComboboxList");
 var _ComboboxStatus = require("./status/ComboboxStatus");
@@ -177,4 +197,5 @@ var _ComboboxCollection = require("./collection/ComboboxCollection");
 var _ComboboxEmpty = require("./empty/ComboboxEmpty");
 var _ComboboxClear = require("./clear/ComboboxClear");
 var _separator = require("../separator");
-var _useFilter = require("./root/utils/useFilter");
+var _useFilter = require("./root/utils/useFilter");
+var _useFilteredItems = require("./root/utils/useFilteredItems");

package/combobox/input/ComboboxInput.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
  */
 export declare const ComboboxInput: React.ForwardRefExoticComponent<Omit<ComboboxInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export interface ComboboxInputState extends FieldRoot.State {
+export interface ComboboxInputState extends FieldRootState {
   /**
    * Whether the corresponding popup is open.
    */
@@ -25,12 +25,12 @@ export interface ComboboxInputState extends FieldRoot.State {
    */
   readOnly: boolean;
 }
-export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInput.State> {
+export interface ComboboxInputProps extends BaseUIComponentProps<'input', ComboboxInputState> {
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxInput {
   type State = ComboboxInputState;

package/combobox/input/ComboboxInput.js

@@ -16,6 +16,7 @@ var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _store2 = require("../store");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _constants = require("../../field/utils/constants");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _ComboboxChipsContext = require("../chips/ComboboxChipsContext");
 var _utils = require("../../floating-ui-react/utils");
@@ -23,6 +24,9 @@ var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContex
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
+var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A text input to search for items in the list.
  * Renders an `<input>` element.
@@ -44,7 +48,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     validation
   } = (0, _FieldRootContext.useFieldRootContext)();
   const {
-    labelId
+    labelId: fieldLabelId
   } = (0, _LabelableContext.useLabelableContext)();
   const comboboxChipsContext = (0, _ComboboxChipsContext.useComboboxChipsContext)();
   const positioning = (0, _ComboboxPositionerContext.useComboboxPositionerContext)(true);
@@ -56,8 +60,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = (0, _ComboboxRootContext.useComboboxInputValueContext)();
-  const required = (0, _store.useStore)(store, _store2.selectors.required);
   const direction = (0, _DirectionContext.useDirection)();
+  const required = (0, _store.useStore)(store, _store2.selectors.required);
   const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const name = (0, _store.useStore)(store, _store2.selectors.name);
@@ -72,14 +76,20 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const inline = (0, _store.useStore)(store, _store2.selectors.inline);
+  const modal = (0, _store.useStore)(store, _store2.selectors.modal);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const listEmpty = filteredItems.length === 0;
   const isInsidePopup = hasPositionerParent || inline;
+  const focusManagerModal = !isInsidePopup || modal;
   const id = (0, _useBaseUiId.useBaseUiId)(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const ariaLabelledBy = (0, _resolveAriaLabelledBy.resolveAriaLabelledBy)(fieldLabelId, undefined);
+  const fieldStateForInput = hasPositionerParent ? _constants.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React.useState(null);
   const isComposingRef = React.useRef(false);
+  const lastActiveIndexRef = React.useRef(null);
+  const shouldRestoreActiveIndexRef = React.useRef(false);
   const setInputElement = (0, _useStableCallback.useStableCallback)(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
@@ -90,14 +100,15 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       inputInsidePopup: nextIsInsidePopup
     });
   });
-  const state = React.useMemo(() => ({
-    ...fieldState,
+  const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
+  const state = {
+    ...fieldStateForInput,
     open,
     disabled,
     readOnly,
     popupSide,
     listEmpty
-  }), [fieldState, open, disabled, readOnly, popupSide, listEmpty]);
+  };
   function handleKeyDown(event) {
     if (!comboboxChipsContext) {
       return undefined;
@@ -159,7 +170,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       value: componentProps.value ?? composingValue ?? inputValue,
       'aria-readonly': readOnly || undefined,
       'aria-required': required || undefined,
-      'aria-labelledby': labelId,
+      'aria-labelledby': ariaLabelledBy,
       disabled,
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
@@ -169,10 +180,31 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       id,
       onFocus() {
         setFocused(true);
+        if (!inline || !shouldRestoreActiveIndexRef.current) {
+          return;
+        }
+        shouldRestoreActiveIndexRef.current = false;
+        const nextActiveIndex = lastActiveIndexRef.current;
+        if (nextActiveIndex == null ||
+        // `valuesRef` can be sparse, so guard against restoring a removed slot.
+        !Object.hasOwn(store.state.valuesRef.current, nextActiveIndex)) {
+          return;
+        }
+        store.state.setIndices({
+          activeIndex: nextActiveIndex
+        });
       },
       onBlur() {
         setTouched(true);
         setFocused(false);
+        const activeIndex = store.state.activeIndex;
+        if (inline && activeIndex !== null && autoHighlightMode !== 'always') {
+          lastActiveIndexRef.current = activeIndex;
+          shouldRestoreActiveIndexRef.current = true;
+          store.state.setIndices({
+            activeIndex: null
+          });
+        }
         if (validationMode === 'onBlur') {
           const valueToValidate = selectionMode === 'none' ? inputValue : selectedValue;
           validation.commit(valueToValidate);
@@ -192,6 +224,12 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
         store.state.setInputValue(next, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       },
       onChange(event) {
+        // Autofill may not provide `inputType` (Chrome) or may report
+        // `insertReplacementText` (Firefox).
+        const inputType = event.nativeEvent.inputType;
+        const autofillLikeInput = !inputType || inputType === 'insertReplacementText';
+        const shouldOpenOnInput = isComposingRef.current || !autofillLikeInput;
+
         // During IME composition, avoid propagating controlled updates to prevent
         // filtering the options prematurely so `Empty` won't show incorrectly.
         // We can't rely on this check for Android due to how it handles composition
@@ -206,8 +244,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
-          if (!readOnly && !disabled) {
-            if (trimmed !== '') {
+          if (!readOnly && !disabled && trimmed) {
+            if (shouldOpenOnInput) {
               store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
               if (!autoHighlightEnabled) {
                 store.state.setIndices({
@@ -239,8 +277,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           }
         }
         const trimmed = event.currentTarget.value.trim();
-        if (!readOnly && !disabled) {
-          if (trimmed !== '') {
+        if (!readOnly && !disabled && trimmed) {
+          if (shouldOpenOnInput) {
             store.state.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
             // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
             if (!autoHighlightEnabled) {
@@ -313,11 +351,12 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           store.state.setSelectedValue(newValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
           return;
         }
+        const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
         const nextIndex = handleKeyDown(event);
         comboboxChipsContext?.setHighlightedChipIndex(nextIndex);
         if (nextIndex !== undefined) {
           comboboxChipsContext?.chipsRef.current[nextIndex]?.focus();
-        } else {
+        } else if (hadHighlightedChip) {
           store.state.inputRef.current?.focus();
         }
 
@@ -329,6 +368,10 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
           const activeIndex = store.state.activeIndex;
           const nativeEvent = event.nativeEvent;
           if (activeIndex === null) {
+            if (inline) {
+              return;
+            }
+
             // Allow form submission when no item is highlighted.
             store.state.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, nativeEvent));
             return;
@@ -348,9 +391,13 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       onPointerDown() {
         store.state.keyboardActiveRef.current = false;
       }
-    }, validation ? validation.getValidationProps(elementProps) : elementProps],
+    }, validationProps],
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });
-  return element;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [open && focusManagerModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInternalDismissButton.ComboboxInternalDismissButton, {
+      ref: store.state.startDismissRef
+    }), element]
+  });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";

package/combobox/input-group/ComboboxInputGroup.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { Side } from "../../utils/useAnchorPositioning.js";
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ */
+export declare const ComboboxInputGroup: React.ForwardRefExoticComponent<Omit<ComboboxInputGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface ComboboxInputGroupState extends FieldRoot.State {
+  /**
+   * Whether the corresponding popup is open.
+   */
+  open: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * Whether the component should ignore user edits.
+   */
+  readOnly: boolean;
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   */
+  popupSide: Side | null;
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty: boolean;
+  /**
+   * Whether the combobox doesn't have a value.
+   */
+  placeholder: boolean;
+}
+export interface ComboboxInputGroupProps extends BaseUIComponentProps<'div', ComboboxInputGroup.State> {}
+export declare namespace ComboboxInputGroup {
+  type State = ComboboxInputGroupState;
+  type Props = ComboboxInputGroupProps;
+}

package/combobox/input-group/ComboboxInputGroup.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInputGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _store2 = require("../store");
+var _stateAttributesMapping = require("../utils/stateAttributesMapping");
+/**
+ * A wrapper for the input and its associated controls.
+ * Renders a `<div>` element.
+ */
+const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state: fieldState,
+    disabled: fieldDisabled
+  } = (0, _FieldRootContext.useFieldRootContext)();
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const {
+    filteredItems
+  } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
+  const open = (0, _store.useStore)(store, _store2.selectors.open);
+  const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
+  const popupSideValue = (0, _store.useStore)(store, _store2.selectors.popupSide);
+  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
+  const comboboxDisabled = (0, _store.useStore)(store, _store2.selectors.disabled);
+  const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
+  const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
+  const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
+  const disabled = fieldDisabled || comboboxDisabled;
+  const listEmpty = filteredItems.length === 0;
+  const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
+  const state = {
+    ...fieldState,
+    open,
+    disabled,
+    readOnly,
+    popupSide,
+    listEmpty,
+    placeholder
+  };
+  const setInputGroupElement = (0, _useStableCallback.useStableCallback)(element => {
+    store.set('inputGroupElement', element);
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: [forwardedRef, setInputGroupElement],
+    props: [{
+      role: 'group'
+    }, elementProps],
+    state,
+    stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxInputGroup.displayName = "ComboboxInputGroup";