@zag-js/combobox 0.47.0 → 0.48.0

package/dist/index.mjs

@@ -28,8 +28,14 @@ collection.empty = () => {
 };
 
 // src/combobox.connect.ts
-import { getEventKey, getNativeEvent, isContextMenuEvent, isLeftClick } from "@zag-js/dom-event";
-import { ariaAttr, dataAttr, raf } from "@zag-js/dom-query";
+import {
+  clickIfLink,
+  getEventKey,
+  getNativeEvent,
+  isContextMenuEvent,
+  isLeftClick
+} from "@zag-js/dom-event";
+import { ariaAttr, dataAttr, isDownloadingEvent, isOpeningInNewTab, raf } from "@zag-js/dom-query";
 import { getPlacementStyles } from "@zag-js/popper";
 
 // src/combobox.dom.ts
@@ -40,6 +46,7 @@ var dom = createScope({
   getControlId: (ctx) => ctx.ids?.control ?? `combobox:${ctx.id}:control`,
   getInputId: (ctx) => ctx.ids?.input ?? `combobox:${ctx.id}:input`,
   getContentId: (ctx) => ctx.ids?.content ?? `combobox:${ctx.id}:content`,
+  getListId: (ctx) => `combobox:${ctx.id}:listbox`,
   getPositionerId: (ctx) => ctx.ids?.positioner ?? `combobox:${ctx.id}:popper`,
   getTriggerId: (ctx) => ctx.ids?.trigger ?? `combobox:${ctx.id}:toggle-btn`,
   getClearTriggerId: (ctx) => ctx.ids?.clearTrigger ?? `combobox:${ctx.id}:clear-btn`,
@@ -47,6 +54,7 @@ var dom = createScope({
   getItemGroupLabelId: (ctx, id) => ctx.ids?.itemGroupLabel?.(id) ?? `combobox:${ctx.id}:optgroup-label:${id}`,
   getItemId: (ctx, id) => `combobox:${ctx.id}:option:${id}`,
   getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getListEl: (ctx) => dom.getById(ctx, dom.getListId(ctx)),
   getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
   getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getControlEl: (ctx) => dom.getById(ctx, dom.getControlId(ctx)),
@@ -65,32 +73,33 @@ var dom = createScope({
 function connect(state, send, normalize) {
   const translations = state.context.translations;
   const collection2 = state.context.collection;
-  const isDisabled = state.context.disabled;
-  const isInteractive = state.context.isInteractive;
-  const isInvalid = state.context.invalid;
-  const isReadOnly = state.context.readOnly;
-  const isOpen = state.hasTag("open");
-  const isFocused = state.hasTag("focused");
+  const disabled = state.context.disabled;
+  const interactive = state.context.isInteractive;
+  const invalid = state.context.invalid;
+  const readOnly = state.context.readOnly;
+  const open = state.hasTag("open");
+  const focused = state.hasTag("focused");
+  const isDialogPopup = state.context.popup === "dialog";
   const popperStyles = getPlacementStyles({
     ...state.context.positioning,
     placement: state.context.currentPlacement
   });
   function getItemState(props) {
     const { item } = props;
-    const disabled = collection2.isItemDisabled(item);
+    const disabled2 = collection2.isItemDisabled(item);
     const value = collection2.itemToValue(item);
     return {
       value,
-      isDisabled: Boolean(disabled || isDisabled),
-      isHighlighted: state.context.highlightedValue === value,
-      isSelected: state.context.value.includes(value)
+      disabled: Boolean(disabled2 || disabled2),
+      highlighted: state.context.highlightedValue === value,
+      selected: state.context.value.includes(value)
     };
   }
   return {
-    isFocused,
-    isOpen,
+    focused,
+    open,
     inputValue: state.context.inputValue,
-    isInputValueEmpty: state.context.isInputValueEmpty,
+    inputEmpty: state.context.isInputValueEmpty,
     highlightedValue: state.context.highlightedValue,
     highlightedItem: state.context.highlightedItem,
     value: state.context.value,
@@ -126,37 +135,42 @@ function connect(state, send, normalize) {
     focus() {
       dom.getInputEl(state.context)?.focus();
     },
-    open() {
-      send("OPEN");
-    },
-    close() {
-      send("CLOSE");
+    setOpen(_open) {
+      if (_open === open)
+        return;
+      send(_open ? "OPEN" : "CLOSE");
     },
     rootProps: normalize.element({
       ...parts.root.attrs,
       dir: state.context.dir,
       id: dom.getRootId(state.context),
-      "data-invalid": dataAttr(isInvalid),
-      "data-readonly": dataAttr(isReadOnly)
+      "data-invalid": dataAttr(invalid),
+      "data-readonly": dataAttr(readOnly)
     }),
     labelProps: normalize.label({
       ...parts.label.attrs,
       dir: state.context.dir,
       htmlFor: dom.getInputId(state.context),
       id: dom.getLabelId(state.context),
-      "data-readonly": dataAttr(isReadOnly),
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid),
-      "data-focus": dataAttr(isFocused)
+      "data-readonly": dataAttr(readOnly),
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid),
+      "data-focus": dataAttr(focused),
+      onClick(event) {
+        if (!isDialogPopup)
+          return;
+        event.preventDefault();
+        dom.getTriggerEl(state.context)?.focus({ preventScroll: true });
+      }
     }),
     controlProps: normalize.element({
       ...parts.control.attrs,
       dir: state.context.dir,
       id: dom.getControlId(state.context),
-      "data-state": isOpen ? "open" : "closed",
-      "data-focus": dataAttr(isFocused),
-      "data-disabled": dataAttr(isDisabled),
-      "data-invalid": dataAttr(isInvalid)
+      "data-state": open ? "open" : "closed",
+      "data-focus": dataAttr(focused),
+      "data-disabled": dataAttr(disabled),
+      "data-invalid": dataAttr(invalid)
     }),
     positionerProps: normalize.element({
       ...parts.positioner.attrs,
@@ -167,47 +181,41 @@ function connect(state, send, normalize) {
     inputProps: normalize.input({
       ...parts.input.attrs,
       dir: state.context.dir,
-      "aria-invalid": ariaAttr(isInvalid),
-      "data-invalid": dataAttr(isInvalid),
+      "aria-invalid": ariaAttr(invalid),
+      "data-invalid": dataAttr(invalid),
       name: state.context.name,
       form: state.context.form,
-      disabled: isDisabled,
+      disabled,
       autoFocus: state.context.autoFocus,
       autoComplete: "off",
       autoCorrect: "off",
       autoCapitalize: "none",
       spellCheck: "false",
-      readOnly: isReadOnly,
+      readOnly,
       placeholder: state.context.placeholder,
       id: dom.getInputId(state.context),
       type: "text",
       role: "combobox",
       defaultValue: state.context.inputValue,
       "aria-autocomplete": state.context.autoComplete ? "both" : "list",
-      "aria-controls": isOpen ? dom.getContentId(state.context) : void 0,
-      "aria-expanded": isOpen,
-      "data-state": isOpen ? "open" : "closed",
+      "aria-controls": isDialogPopup ? dom.getListId(state.context) : dom.getContentId(state.context),
+      "aria-expanded": open,
+      "data-state": open ? "open" : "closed",
       "aria-activedescendant": state.context.highlightedValue ? dom.getItemId(state.context, state.context.highlightedValue) : void 0,
-      onCompositionStart() {
-        send("INPUT.COMPOSITION_START");
-      },
-      onCompositionEnd() {
-        raf(() => {
-          send("INPUT.COMPOSITION_END");
-        });
-      },
       onClick() {
-        if (!isInteractive)
+        if (!state.context.openOnClick)
+          return;
+        if (!interactive)
           return;
         send("INPUT.CLICK");
       },
       onFocus() {
-        if (isDisabled)
+        if (disabled)
           return;
         send("INPUT.FOCUS");
       },
       onBlur() {
-        if (isDisabled)
+        if (disabled)
           return;
         send("INPUT.BLUR");
       },
@@ -215,51 +223,57 @@ function connect(state, send, normalize) {
         send({ type: "INPUT.CHANGE", value: event.currentTarget.value });
       },
       onKeyDown(event) {
-        if (!isInteractive)
+        if (event.defaultPrevented)
+          return;
+        if (!interactive)
           return;
         const evt = getNativeEvent(event);
         if (evt.ctrlKey || evt.shiftKey || evt.isComposing)
           return;
+        const openOnKeyPress = state.context.openOnKeyPress;
+        const isModifierKey = event.ctrlKey || event.metaKey || event.shiftKey;
+        const keypress = true;
         const keymap = {
           ArrowDown(event2) {
-            send({ type: event2.altKey ? "INPUT.ARROW_DOWN+ALT" : "INPUT.ARROW_DOWN" });
+            if (!openOnKeyPress && !open)
+              return;
+            send({ type: event2.altKey ? "OPEN" : "INPUT.ARROW_DOWN", keypress });
             event2.preventDefault();
-            event2.stopPropagation();
           },
           ArrowUp() {
-            send(event.altKey ? "INPUT.ARROW_UP+ALT" : "INPUT.ARROW_UP");
+            if (!openOnKeyPress && !open)
+              return;
+            send({ type: event.altKey ? "CLOSE" : "INPUT.ARROW_UP", keypress });
             event.preventDefault();
-            event.stopPropagation();
           },
           Home(event2) {
-            const isModified = event2.ctrlKey || event2.metaKey || event2.shiftKey;
-            if (isModified)
+            if (isModifierKey)
               return;
-            send("INPUT.HOME");
-            if (isOpen) {
+            send({ type: "INPUT.HOME", keypress });
+            if (open) {
               event2.preventDefault();
-              event2.stopPropagation();
             }
           },
           End(event2) {
-            const isModified = event2.ctrlKey || event2.metaKey || event2.shiftKey;
-            if (isModified)
+            if (isModifierKey)
               return;
-            send("INPUT.END");
-            if (isOpen) {
+            send({ type: "INPUT.END", keypress });
+            if (open) {
               event2.preventDefault();
-              event2.stopPropagation();
             }
           },
-          Enter() {
-            if (state.context.composing)
+          Enter(event2) {
+            if (evt.isComposing)
               return;
-            send("INPUT.ENTER");
-            event.preventDefault();
-            event.stopPropagation();
+            send({ type: "INPUT.ENTER", keypress });
+            if (open) {
+              event2.preventDefault();
+            }
+            const itemEl = dom.getHighlightedItemEl(state.context);
+            clickIfLink(itemEl);
           },
           Escape() {
-            send("INPUT.ESCAPE");
+            send({ type: "INPUT.ESCAPE", keypress });
             event.preventDefault();
           }
         };
@@ -272,59 +286,97 @@ function connect(state, send, normalize) {
       ...parts.trigger.attrs,
       dir: state.context.dir,
       id: dom.getTriggerId(state.context),
-      "aria-haspopup": "listbox",
+      "aria-haspopup": isDialogPopup ? "dialog" : "listbox",
       type: "button",
-      tabIndex: -1,
+      tabIndex: isDialogPopup ? 0 : -1,
       "aria-label": translations.triggerLabel,
-      "aria-expanded": isOpen,
-      "data-state": isOpen ? "open" : "closed",
-      "aria-controls": isOpen ? dom.getContentId(state.context) : void 0,
-      disabled: isDisabled,
-      "data-readonly": dataAttr(isReadOnly),
-      "data-disabled": dataAttr(isDisabled),
-      onPointerDown(event) {
+      "aria-expanded": open,
+      "data-state": open ? "open" : "closed",
+      "aria-controls": open ? dom.getContentId(state.context) : void 0,
+      disabled,
+      "data-readonly": dataAttr(readOnly),
+      "data-disabled": dataAttr(disabled),
+      onClick(event) {
         const evt = getNativeEvent(event);
-        if (!isInteractive || !isLeftClick(evt) || evt.pointerType === "touch")
+        if (!interactive)
+          return;
+        if (!isLeftClick(evt))
           return;
         send("TRIGGER.CLICK");
-        event.preventDefault();
       },
-      onPointerUp(event) {
-        if (event.pointerType !== "touch")
+      onPointerDown(event) {
+        if (!interactive)
           return;
-        send("TRIGGER.CLICK");
+        if (event.pointerType === "touch")
+          return;
+        event.preventDefault();
+        queueMicrotask(() => {
+          dom.getInputEl(state.context)?.focus({ preventScroll: true });
+        });
       },
-      style: { outline: 0 }
+      onKeyDown(event) {
+        if (event.defaultPrevented)
+          return;
+        if (!isDialogPopup)
+          return;
+        const keyMap = {
+          ArrowDown() {
+            send("INPUT.FOCUS");
+            send("INPUT.ARROW_DOWN");
+            raf(() => {
+              dom.getInputEl(state.context)?.focus({ preventScroll: true });
+            });
+          },
+          ArrowUp() {
+            send("INPUT.FOCUS");
+            send("INPUT.ARROW_UP");
+            raf(() => {
+              dom.getInputEl(state.context)?.focus({ preventScroll: true });
+            });
+          }
+        };
+        const key = getEventKey(event, state.context);
+        const exec = keyMap[key];
+        if (exec) {
+          exec(event);
+          event.preventDefault();
+        }
+      }
     }),
     contentProps: normalize.element({
       ...parts.content.attrs,
       dir: state.context.dir,
       id: dom.getContentId(state.context),
-      role: "listbox",
+      role: isDialogPopup ? "dialog" : "listbox",
       tabIndex: -1,
-      hidden: !isOpen,
-      "data-state": isOpen ? "open" : "closed",
+      hidden: !open,
+      "data-state": open ? "open" : "closed",
       "aria-labelledby": dom.getLabelId(state.context),
-      "aria-multiselectable": state.context.multiple ? true : void 0,
+      "aria-multiselectable": state.context.multiple && !isDialogPopup ? true : void 0,
       onPointerDown(event) {
         event.preventDefault();
       }
     }),
+    // only used when triggerOnly: true
+    listProps: normalize.element({
+      id: dom.getListId(state.context),
+      role: isDialogPopup ? "listbox" : void 0,
+      "aria-multiselectable": isDialogPopup && state.context.multiple ? true : void 0
+    }),
     clearTriggerProps: normalize.button({
       ...parts.clearTrigger.attrs,
       dir: state.context.dir,
       id: dom.getClearTriggerId(state.context),
       type: "button",
       tabIndex: -1,
-      disabled: isDisabled,
+      disabled,
       "aria-label": translations.clearTriggerLabel,
+      "aria-controls": dom.getInputId(state.context),
       hidden: !state.context.value.length,
-      onPointerDown(event) {
-        const evt = getNativeEvent(event);
-        if (!isInteractive || !isLeftClick(evt))
+      onClick() {
+        if (!interactive)
           return;
         send({ type: "VALUE.CLEAR", src: "clear-trigger" });
-        event.preventDefault();
       }
     }),
     getItemState,
@@ -337,24 +389,35 @@ function connect(state, send, normalize) {
         id: dom.getItemId(state.context, value),
         role: "option",
         tabIndex: -1,
-        "data-highlighted": dataAttr(itemState.isHighlighted),
-        "data-state": itemState.isSelected ? "checked" : "unchecked",
-        "aria-selected": itemState.isHighlighted,
-        "aria-disabled": itemState.isDisabled,
-        "data-disabled": dataAttr(itemState.isDisabled),
+        "data-highlighted": dataAttr(itemState.highlighted),
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        "aria-selected": itemState.highlighted,
+        "aria-disabled": itemState.disabled,
+        "data-disabled": dataAttr(itemState.disabled),
         "data-value": itemState.value,
         onPointerMove() {
-          if (itemState.isDisabled)
+          if (itemState.disabled)
             return;
-          send({ type: "ITEM.POINTER_OVER", value });
+          send({ type: "ITEM.POINTER_MOVE", value });
         },
         onPointerLeave() {
-          if (itemState.isDisabled)
+          if (props.persistFocus)
+            return;
+          if (itemState.disabled)
+            return;
+          const mouseMoved = state.previousEvent.type === "ITEM.POINTER_MOVE";
+          if (!mouseMoved)
             return;
           send({ type: "ITEM.POINTER_LEAVE", value });
         },
         onPointerUp(event) {
-          if (itemState.isDisabled || isContextMenuEvent(event))
+          if (isDownloadingEvent(event))
+            return;
+          if (isOpeningInNewTab(event))
+            return;
+          if (isContextMenuEvent(event))
+            return;
+          if (itemState.disabled)
             return;
           send({ type: "ITEM.CLICK", src: "pointerup", value });
         },
@@ -369,8 +432,8 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.itemText.attrs,
         dir: state.context.dir,
-        "data-disabled": dataAttr(itemState.isDisabled),
-        "data-highlighted": dataAttr(itemState.isHighlighted)
+        "data-disabled": dataAttr(itemState.disabled),
+        "data-highlighted": dataAttr(itemState.highlighted)
       });
     },
     getItemIndicatorProps(props) {
@@ -379,8 +442,8 @@ function connect(state, send, normalize) {
         "aria-hidden": true,
         ...parts.itemIndicator.attrs,
         dir: state.context.dir,
-        "data-state": itemState.isSelected ? "checked" : "unchecked",
-        hidden: !itemState.isSelected
+        "data-state": itemState.selected ? "checked" : "unchecked",
+        hidden: !itemState.selected
       });
     },
     getItemGroupProps(props) {
@@ -408,31 +471,34 @@ function connect(state, send, normalize) {
 import { ariaHidden } from "@zag-js/aria-hidden";
 import { createMachine, guards } from "@zag-js/core";
 import { trackDismissableElement } from "@zag-js/dismissable";
-import { raf as raf2, scrollIntoView } from "@zag-js/dom-query";
-import { observeAttributes, observeChildren } from "@zag-js/mutation-observer";
+import { observeAttributes, observeChildren, raf as raf2, scrollIntoView } from "@zag-js/dom-query";
 import { getPlacement } from "@zag-js/popper";
-import { addOrRemove, compact, isEqual, match } from "@zag-js/utils";
+import { addOrRemove, compact, isBoolean, isEqual, match } from "@zag-js/utils";
 var { and, not } = guards;
-var KEYDOWN_EVENT_REGEX = /(ARROW_UP|ARROW_DOWN|HOME|END|ENTER|ESCAPE)/;
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
     {
       id: "combobox",
-      initial: ctx.autoFocus ? "focused" : "idle",
+      initial: ctx.open ? "suggesting" : "idle",
       context: {
-        loop: true,
+        loopFocus: true,
         openOnClick: false,
-        composing: false,
         value: [],
         highlightedValue: null,
         inputValue: "",
-        selectOnBlur: true,
         allowCustomValue: false,
-        closeOnSelect: true,
+        closeOnSelect: !ctx.multiple,
         inputBehavior: "none",
         selectionBehavior: "replace",
+        openOnKeyPress: true,
+        openOnChange: true,
+        dismissable: true,
+        popup: "listbox",
         ...ctx,
+        highlightedItem: null,
+        selectedItems: [],
+        valueAsString: "",
         collection: ctx.collection ?? collection.empty(),
         positioning: {
           placement: "bottom",
@@ -446,20 +512,20 @@ function machine(userContext) {
           ...ctx.translations
         }
       },
-      created: ["initialize"],
+      created: ["syncInitialValues", "syncSelectionBehavior"],
       computed: {
         isInputValueEmpty: (ctx2) => ctx2.inputValue.length === 0,
         isInteractive: (ctx2) => !(ctx2.readOnly || ctx2.disabled),
         autoComplete: (ctx2) => ctx2.inputBehavior === "autocomplete",
         autoHighlight: (ctx2) => ctx2.inputBehavior === "autohighlight",
-        selectedItems: (ctx2) => ctx2.collection.items(ctx2.value),
-        highlightedItem: (ctx2) => ctx2.collection.item(ctx2.highlightedValue),
-        valueAsString: (ctx2) => ctx2.collection.itemsToString(ctx2.selectedItems),
         hasSelectedItems: (ctx2) => ctx2.value.length > 0
       },
       watch: {
+        value: ["syncSelectedItems"],
         inputValue: ["syncInputValue"],
-        highlightedValue: ["autofillInputValue"]
+        highlightedValue: ["autofillInputValue"],
+        multiple: ["syncSelectionBehavior"],
+        open: ["toggleVisibility"]
       },
       on: {
         "HIGHLIGHTED_VALUE.SET": {
@@ -477,16 +543,6 @@ function machine(userContext) {
         "INPUT_VALUE.SET": {
           actions: "setInputValue"
         },
-        "VALUE.CLEAR": {
-          target: "focused",
-          actions: ["clearInputValue", "clearSelectedItems"]
-        },
-        "INPUT.COMPOSITION_START": {
-          actions: ["setIsComposing"]
-        },
-        "INPUT.COMPOSITION_END": {
-          actions: ["clearIsComposing"]
-        },
         "COLLECTION.SET": {
           actions: ["setCollection"]
         },
@@ -499,32 +555,75 @@ function machine(userContext) {
           tags: ["idle", "closed"],
           entry: ["scrollContentToTop", "clearHighlightedItem"],
           on: {
-            "TRIGGER.CLICK": {
-              target: "interacting",
-              actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-            },
-            "INPUT.CLICK": {
-              guard: "openOnClick",
-              target: "interacting",
-              actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+            "CONTROLLED.OPEN": {
+              target: "interacting"
             },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
             "INPUT.FOCUS": {
               target: "focused"
             },
-            OPEN: {
-              target: "interacting",
-              actions: ["invokeOnOpen"]
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              target: "focused",
+              actions: ["clearInputValue", "clearSelectedItems"]
             }
           }
         },
         focused: {
           tags: ["focused", "closed"],
-          entry: ["focusInput", "scrollContentToTop", "clearHighlightedItem"],
+          entry: ["focusInputOrTrigger", "scrollContentToTop", "clearHighlightedItem"],
           on: {
-            "INPUT.CHANGE": {
-              target: "suggesting",
-              actions: "setInputValue"
-            },
+            "CONTROLLED.OPEN": [
+              {
+                guard: "isChangeEvent",
+                target: "suggesting"
+              },
+              {
+                target: "interacting"
+              }
+            ],
+            "INPUT.CHANGE": [
+              {
+                guard: and("isOpenControlled", "openOnChange"),
+                actions: ["setInputValue", "invokeOnOpen"]
+              },
+              {
+                guard: "openOnChange",
+                target: "suggesting",
+                actions: ["setInputValue", "invokeOnOpen"]
+              },
+              {
+                actions: "setInputValue"
+              }
+            ],
             "LAYER.INTERACT_OUTSIDE": {
               target: "idle"
             },
@@ -535,61 +634,103 @@ function machine(userContext) {
             "INPUT.BLUR": {
               target: "idle"
             },
-            "INPUT.CLICK": {
-              guard: "openOnClick",
-              target: "interacting",
-              actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
-            },
-            "TRIGGER.CLICK": {
-              target: "interacting",
-              actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
-            },
+            "INPUT.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["focusInput", "highlightFirstSelectedItem", "invokeOnOpen"]
+              }
+            ],
             "INPUT.ARROW_DOWN": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["invokeOnOpen"]
+              },
               {
                 guard: "autoComplete",
                 target: "interacting",
                 actions: ["invokeOnOpen"]
               },
+              // == group 2 ==
               {
-                guard: "hasSelectedItems",
-                target: "interacting",
-                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+                guard: "isOpenControlled",
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
               },
               {
                 target: "interacting",
-                actions: ["highlightFirstItem", "invokeOnOpen"]
+                actions: ["highlightFirstOrSelectedItem", "invokeOnOpen"]
               }
             ],
-            "INPUT.ARROW_DOWN+ALT": {
-              target: "interacting",
-              actions: "invokeOnOpen"
-            },
             "INPUT.ARROW_UP": [
+              // == group 1 ==
               {
                 guard: "autoComplete",
                 target: "interacting",
                 actions: "invokeOnOpen"
               },
               {
-                guard: "hasSelectedItems",
+                guard: "autoComplete",
                 target: "interacting",
-                actions: ["highlightFirstSelectedItem", "invokeOnOpen"]
+                actions: "invokeOnOpen"
               },
+              // == group 2 ==
               {
                 target: "interacting",
-                actions: ["highlightLastItem", "invokeOnOpen"]
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
               }
             ],
-            OPEN: {
-              target: "interacting",
-              actions: ["invokeOnOpen"]
+            OPEN: [
+              {
+                guard: "isOpenControlled",
+                actions: ["invokeOnOpen"]
+              },
+              {
+                target: "interacting",
+                actions: ["invokeOnOpen"]
+              }
+            ],
+            "VALUE.CLEAR": {
+              actions: ["clearInputValue", "clearSelectedItems"]
             }
           }
         },
         interacting: {
           tags: ["open", "focused"],
-          activities: ["scrollIntoView", "trackDismissableLayer", "computePlacement", "hideOtherElements"],
+          activities: [
+            "scrollIntoView",
+            "trackDismissableLayer",
+            "computePlacement",
+            "hideOtherElements",
+            "trackContentHeight"
+          ],
           on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused"
+              },
+              {
+                target: "idle"
+              }
+            ],
             "INPUT.HOME": {
               actions: ["highlightFirstItem"]
             },
@@ -614,31 +755,32 @@ function machine(userContext) {
                 actions: "highlightPrevItem"
               }
             ],
-            "INPUT.ARROW_UP+ALT": {
-              target: "focused"
-            },
             "INPUT.ENTER": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectHighlightedItem"]
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"]
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectHighlightedItem", "invokeOnClose"]
+              },
+              {
+                actions: ["selectHighlightedItem"]
               }
             ],
             "INPUT.CHANGE": [
               {
                 guard: "autoComplete",
                 target: "suggesting",
-                actions: ["setInputValue"]
+                actions: ["setInputValue", "invokeOnOpen"]
               },
               {
                 target: "suggesting",
-                actions: ["clearHighlightedItem", "setInputValue"]
+                actions: ["clearHighlightedItem", "setInputValue", "invokeOnOpen"]
               }
             ],
-            "ITEM.POINTER_OVER": {
+            "ITEM.POINTER_MOVE": {
               actions: ["setHighlightedItem"]
             },
             "ITEM.POINTER_LEAVE": {
@@ -646,49 +788,88 @@ function machine(userContext) {
             },
             "ITEM.CLICK": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectItem"]
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"]
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectItem", "invokeOnClose"]
+              },
+              {
+                actions: ["selectItem"]
               }
             ],
             "LAYER.ESCAPE": [
+              {
+                guard: and("isOpenControlled", "autoComplete"),
+                actions: ["syncInputValue", "invokeOnClose"]
+              },
               {
                 guard: "autoComplete",
                 target: "focused",
                 actions: ["syncInputValue", "invokeOnClose"]
               },
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
               {
                 target: "focused",
                 actions: ["invokeOnClose"]
               }
             ],
-            "TRIGGER.CLICK": {
-              target: "focused",
-              actions: "invokeOnClose"
-            },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose"
+              }
+            ],
             "LAYER.INTERACT_OUTSIDE": [
+              // == group 1 ==
               {
-                guard: and("selectOnBlur", "hasHighlightedItem"),
-                target: "idle",
-                actions: ["selectHighlightedItem", "invokeOnClose"]
+                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
               },
               {
                 guard: and("isCustomValue", not("allowCustomValue")),
                 target: "idle",
                 actions: ["revertInputValue", "invokeOnClose"]
               },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
               {
                 target: "idle",
                 actions: "invokeOnClose"
               }
             ],
-            CLOSE: {
-              target: "focused",
-              actions: "invokeOnClose"
-            }
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose"
+              }
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              }
+            ]
           }
         },
         suggesting: {
@@ -698,12 +879,21 @@ function machine(userContext) {
             "scrollIntoView",
             "computePlacement",
             "trackChildNodes",
-            "hideOtherElements"
+            "hideOtherElements",
+            "trackContentHeight"
           ],
-          entry: ["focusInput", "invokeOnOpen"],
+          entry: ["focusInput"],
           on: {
+            "CONTROLLED.CLOSE": [
+              {
+                guard: "restoreFocus",
+                target: "focused"
+              },
+              {
+                target: "idle"
+              }
+            ],
             CHILDREN_CHANGE: {
-              guard: not("isHighlightedItemVisible"),
               actions: ["highlightFirstItem"]
             },
             "INPUT.ARROW_DOWN": {
@@ -714,9 +904,6 @@ function machine(userContext) {
               target: "interacting",
               actions: "highlightPrevItem"
             },
-            "INPUT.ARROW_UP+ALT": {
-              target: "focused"
-            },
             "INPUT.HOME": {
               target: "interacting",
               actions: ["highlightFirstItem"]
@@ -727,28 +914,38 @@ function machine(userContext) {
             },
             "INPUT.ENTER": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectHighlightedItem"]
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectHighlightedItem", "invokeOnClose"]
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectHighlightedItem", "invokeOnClose"]
+              },
+              {
+                actions: ["selectHighlightedItem"]
               }
             ],
             "INPUT.CHANGE": [
               {
                 guard: "autoHighlight",
-                actions: ["setInputValue", "highlightFirstItem"]
+                actions: ["setInputValue"]
               },
               {
-                actions: ["clearHighlightedItem", "setInputValue"]
+                actions: ["setInputValue"]
               }
             ],
-            "LAYER.ESCAPE": {
-              target: "focused",
-              actions: "invokeOnClose"
-            },
-            "ITEM.POINTER_OVER": {
+            "LAYER.ESCAPE": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose"
+              }
+            ],
+            "ITEM.POINTER_MOVE": {
               target: "interacting",
               actions: "setHighlightedItem"
             },
@@ -756,41 +953,76 @@ function machine(userContext) {
               actions: "clearHighlightedItem"
             },
             "LAYER.INTERACT_OUTSIDE": [
+              // == group 1 ==
+              {
+                guard: and("isOpenControlled", "isCustomValue", not("allowCustomValue")),
+                actions: ["revertInputValue", "invokeOnClose"]
+              },
               {
                 guard: and("isCustomValue", not("allowCustomValue")),
                 target: "idle",
                 actions: ["revertInputValue", "invokeOnClose"]
               },
+              // == group 2 ==
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
               {
                 target: "idle",
                 actions: "invokeOnClose"
               }
             ],
-            "TRIGGER.CLICK": {
-              target: "focused",
-              actions: "invokeOnClose"
-            },
+            "TRIGGER.CLICK": [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose"
+              }
+            ],
             "ITEM.CLICK": [
               {
-                guard: not("closeOnSelect"),
-                actions: ["selectItem"]
+                guard: and("isOpenControlled", "closeOnSelect"),
+                actions: ["selectItem", "invokeOnClose"]
               },
               {
+                guard: "closeOnSelect",
                 target: "focused",
                 actions: ["selectItem", "invokeOnClose"]
+              },
+              {
+                actions: ["selectItem"]
               }
             ],
-            CLOSE: {
-              target: "focused",
-              actions: "invokeOnClose"
-            }
+            CLOSE: [
+              {
+                guard: "isOpenControlled",
+                actions: "invokeOnClose"
+              },
+              {
+                target: "focused",
+                actions: "invokeOnClose"
+              }
+            ],
+            "VALUE.CLEAR": [
+              {
+                guard: "isOpenControlled",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              },
+              {
+                target: "focused",
+                actions: ["clearInputValue", "clearSelectedItems", "invokeOnClose"]
+              }
+            ]
           }
         }
       }
     },
     {
       guards: {
-        openOnClick: (ctx2) => !!ctx2.openOnClick,
         isInputValueEmpty: (ctx2) => ctx2.isInputValueEmpty,
         autoComplete: (ctx2) => ctx2.autoComplete && !ctx2.multiple,
         autoHighlight: (ctx2) => ctx2.autoHighlight,
@@ -799,22 +1031,24 @@ function machine(userContext) {
         isCustomValue: (ctx2) => ctx2.inputValue !== ctx2.valueAsString,
         allowCustomValue: (ctx2) => !!ctx2.allowCustomValue,
         hasHighlightedItem: (ctx2) => ctx2.highlightedValue != null,
-        hasSelectedItems: (ctx2) => ctx2.hasSelectedItems,
-        selectOnBlur: (ctx2) => !!ctx2.selectOnBlur,
-        closeOnSelect: (ctx2) => ctx2.multiple ? false : !!ctx2.closeOnSelect,
-        isHighlightedItemVisible: (ctx2) => ctx2.collection.has(ctx2.highlightedValue)
+        closeOnSelect: (ctx2) => !!ctx2.closeOnSelect,
+        isOpenControlled: (ctx2) => !!ctx2["open.controlled"],
+        openOnChange: (ctx2, evt) => {
+          if (isBoolean(ctx2.openOnChange))
+            return ctx2.openOnChange;
+          return !!ctx2.openOnChange?.({ inputValue: evt.value });
+        },
+        restoreFocus: (_ctx, evt) => evt.restoreFocus == null ? true : !!evt.restoreFocus,
+        isChangeEvent: (_ctx, evt) => evt.previousEvent?.type === "INPUT.CHANGE"
       },
       activities: {
         trackDismissableLayer(ctx2, _evt, { send }) {
+          if (!ctx2.dismissable)
+            return;
           const contentEl = () => dom.getContentEl(ctx2);
           return trackDismissableElement(contentEl, {
             defer: true,
-            exclude: () => [
-              dom.getInputEl(ctx2),
-              dom.getContentEl(ctx2),
-              dom.getTriggerEl(ctx2),
-              dom.getClearTriggerEl(ctx2)
-            ],
+            exclude: () => [dom.getInputEl(ctx2), dom.getTriggerEl(ctx2), dom.getClearTriggerEl(ctx2)],
             onFocusOutside: ctx2.onFocusOutside,
             onPointerDownOutside: ctx2.onPointerDownOutside,
             onInteractOutside: ctx2.onInteractOutside,
@@ -824,7 +1058,7 @@ function machine(userContext) {
               send("LAYER.ESCAPE");
             },
             onDismiss() {
-              send("LAYER.INTERACT_OUTSIDE");
+              send({ type: "LAYER.INTERACT_OUTSIDE", restoreFocus: false });
             }
           });
         },
@@ -848,22 +1082,56 @@ function machine(userContext) {
           if (!ctx2.autoHighlight)
             return;
           const exec = () => send("CHILDREN_CHANGE");
-          exec();
-          return observeChildren(dom.getContentEl(ctx2), exec);
+          raf2(() => exec());
+          const contentEl = () => dom.getContentEl(ctx2);
+          return observeChildren(contentEl, {
+            callback: exec,
+            defer: true
+          });
         },
         scrollIntoView(ctx2, _evt, { getState }) {
           const inputEl = dom.getInputEl(ctx2);
-          const exec = () => {
+          const exec = (immediate) => {
             const state = getState();
-            const isPointer = state.event.type.startsWith("ITEM.POINTER");
-            if (isPointer || !ctx2.highlightedValue)
+            const pointer = state.event.type.startsWith("ITEM.POINTER");
+            if (pointer || !ctx2.highlightedValue)
               return;
             const optionEl = dom.getHighlightedItemEl(ctx2);
             const contentEl = dom.getContentEl(ctx2);
+            if (ctx2.scrollToIndexFn) {
+              const highlightedIndex = ctx2.collection.indexOf(ctx2.highlightedValue);
+              ctx2.scrollToIndexFn({ index: highlightedIndex, immediate });
+              return;
+            }
             scrollIntoView(optionEl, { rootEl: contentEl, block: "nearest" });
           };
-          raf2(() => exec());
-          return observeAttributes(inputEl, ["aria-activedescendant"], exec);
+          raf2(() => exec(true));
+          return observeAttributes(inputEl, {
+            attributes: ["aria-activedescendant"],
+            callback: () => exec(false)
+          });
+        },
+        trackContentHeight(ctx2) {
+          let cleanup;
+          raf2(() => {
+            const contentEl = dom.getContentEl(ctx2);
+            const listboxEl = dom.getListEl(ctx2);
+            if (!contentEl || !listboxEl)
+              return;
+            const win = dom.getWin(ctx2);
+            let rafId;
+            const observer = new win.ResizeObserver(() => {
+              rafId = requestAnimationFrame(() => {
+                contentEl.style.setProperty(`--height`, `${listboxEl.offsetHeight}px`);
+              });
+            });
+            observer.observe(contentEl);
+            cleanup = () => {
+              cancelAnimationFrame(rafId);
+              observer.unobserve(contentEl);
+            };
+          });
+          return () => cleanup?.();
         }
       },
       actions: {
@@ -880,12 +1148,6 @@ function machine(userContext) {
             }
           });
         },
-        setIsComposing(ctx2) {
-          ctx2.composing = true;
-        },
-        clearIsComposing(ctx2) {
-          ctx2.composing = false;
-        },
         setHighlightedItem(ctx2, evt) {
           set.highlightedItem(ctx2, evt.value);
         },
@@ -903,18 +1165,28 @@ function machine(userContext) {
           set.selectedItems(ctx2, value);
         },
         focusInput(ctx2) {
-          if (dom.isInputFocused(ctx2))
-            return;
-          dom.getInputEl(ctx2)?.focus({ preventScroll: true });
+          raf2(() => {
+            if (dom.isInputFocused(ctx2))
+              return;
+            dom.getInputEl(ctx2)?.focus({ preventScroll: true });
+          });
+        },
+        focusInputOrTrigger(ctx2) {
+          queueMicrotask(() => {
+            if (ctx2.popup === "dialog") {
+              dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
+            } else {
+              dom.getInputEl(ctx2)?.focus({ preventScroll: true });
+            }
+          });
         },
         syncInputValue(ctx2, evt) {
-          const isTyping = !KEYDOWN_EVENT_REGEX.test(evt.type);
           const inputEl = dom.getInputEl(ctx2);
           if (!inputEl)
             return;
           inputEl.value = ctx2.inputValue;
           raf2(() => {
-            if (isTyping)
+            if (!evt.keypress)
               return;
             const { selectionStart, selectionEnd } = inputEl;
             if (Math.abs((selectionEnd ?? 0) - (selectionStart ?? 0)) !== 0)
@@ -931,24 +1203,30 @@ function machine(userContext) {
           set.inputValue(ctx2, "");
         },
         revertInputValue(ctx2) {
-          set.inputValue(
-            ctx2,
-            match(ctx2.selectionBehavior, {
-              replace: ctx2.hasSelectedItems ? ctx2.valueAsString : "",
-              clear: "",
-              preserve: ctx2.inputValue
-            })
-          );
+          const inputValue = match(ctx2.selectionBehavior, {
+            replace: ctx2.hasSelectedItems ? ctx2.valueAsString : "",
+            preserve: ctx2.inputValue,
+            clear: ""
+          });
+          set.inputValue(ctx2, inputValue);
         },
-        initialize(ctx2) {
-          const items = ctx2.collection.items(ctx2.value);
-          const valueAsString = ctx2.collection.itemsToString(items);
+        syncInitialValues(ctx2) {
+          const selectedItems = ctx2.collection.items(ctx2.value);
+          const valueAsString = ctx2.collection.itemsToString(selectedItems);
+          ctx2.highlightedItem = ctx2.collection.item(ctx2.highlightedValue);
+          ctx2.selectedItems = selectedItems;
+          ctx2.valueAsString = valueAsString;
           ctx2.inputValue = match(ctx2.selectionBehavior, {
-            preserve: valueAsString,
+            preserve: ctx2.inputValue || valueAsString,
             replace: valueAsString,
             clear: ""
           });
         },
+        syncSelectionBehavior(ctx2) {
+          if (ctx2.multiple) {
+            ctx2.selectionBehavior = "clear";
+          }
+        },
         setSelectedItems(ctx2, evt) {
           set.selectedItems(ctx2, evt.value);
         },
@@ -956,10 +1234,14 @@ function machine(userContext) {
           set.selectedItems(ctx2, []);
         },
         scrollContentToTop(ctx2) {
-          const contentEl = dom.getContentEl(ctx2);
-          if (!contentEl)
-            return;
-          contentEl.scrollTop = 0;
+          if (ctx2.scrollToIndexFn) {
+            ctx2.scrollToIndexFn({ index: 0, immediate: true });
+          } else {
+            const contentEl = dom.getContentEl(ctx2);
+            if (!contentEl)
+              return;
+            contentEl.scrollTop = 0;
+          }
         },
         invokeOnOpen(ctx2) {
           ctx2.onOpenChange?.({ open: true });
@@ -968,28 +1250,70 @@ function machine(userContext) {
           ctx2.onOpenChange?.({ open: false });
         },
         highlightFirstItem(ctx2) {
-          const value = ctx2.collection.first();
-          set.highlightedItem(ctx2, value);
+          raf2(() => {
+            const value = ctx2.collection.first();
+            set.highlightedItem(ctx2, value);
+          });
         },
         highlightLastItem(ctx2) {
-          const value = ctx2.collection.last();
-          set.highlightedItem(ctx2, value);
+          raf2(() => {
+            const value = ctx2.collection.last();
+            set.highlightedItem(ctx2, value);
+          });
         },
         highlightNextItem(ctx2) {
-          const value = ctx2.collection.next(ctx2.highlightedValue) ?? (ctx2.loop ? ctx2.collection.first() : null);
+          let value = null;
+          if (ctx2.highlightedValue) {
+            value = ctx2.collection.next(ctx2.highlightedValue);
+            if (!value && ctx2.loopFocus)
+              value = ctx2.collection.first();
+          } else {
+            value = ctx2.collection.first();
+          }
           set.highlightedItem(ctx2, value);
         },
         highlightPrevItem(ctx2) {
-          const value = ctx2.collection.prev(ctx2.highlightedValue) ?? (ctx2.loop ? ctx2.collection.last() : null);
+          let value = null;
+          if (ctx2.highlightedValue) {
+            value = ctx2.collection.prev(ctx2.highlightedValue);
+            if (!value && ctx2.loopFocus)
+              value = ctx2.collection.last();
+          } else {
+            value = ctx2.collection.last();
+          }
           set.highlightedItem(ctx2, value);
         },
         highlightFirstSelectedItem(ctx2) {
-          const [value] = ctx2.collection.sort(ctx2.value);
-          set.highlightedItem(ctx2, value);
+          raf2(() => {
+            const [value] = ctx2.collection.sort(ctx2.value);
+            set.highlightedItem(ctx2, value);
+          });
+        },
+        highlightFirstOrSelectedItem(ctx2) {
+          raf2(() => {
+            let value = null;
+            if (ctx2.hasSelectedItems) {
+              value = ctx2.collection.sort(ctx2.value)[0];
+            } else {
+              value = ctx2.collection.first();
+            }
+            set.highlightedItem(ctx2, value);
+          });
+        },
+        highlightLastOrSelectedItem(ctx2) {
+          raf2(() => {
+            let value = null;
+            if (ctx2.hasSelectedItems) {
+              value = ctx2.collection.sort(ctx2.value)[0];
+            } else {
+              value = ctx2.collection.last();
+            }
+            set.highlightedItem(ctx2, value);
+          });
         },
         autofillInputValue(ctx2, evt) {
           const inputEl = dom.getInputEl(ctx2);
-          if (!ctx2.autoComplete || !inputEl || !KEYDOWN_EVENT_REGEX.test(evt.type))
+          if (!ctx2.autoComplete || !inputEl || !evt.keypress)
             return;
           const valueText = ctx2.collection.valueToString(ctx2.highlightedValue);
           raf2(() => {
@@ -998,31 +1322,64 @@ function machine(userContext) {
         },
         setCollection(ctx2, evt) {
           ctx2.collection = evt.value;
+        },
+        syncSelectedItems(ctx2) {
+          const prevSelectedItems = ctx2.selectedItems;
+          ctx2.selectedItems = ctx2.value.map((v) => {
+            const foundItem = prevSelectedItems.find((item) => ctx2.collection.itemToValue(item) === v);
+            if (foundItem)
+              return foundItem;
+            return ctx2.collection.item(v);
+          });
+        },
+        toggleVisibility(ctx2, evt, { send }) {
+          send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
         }
       }
     }
   );
 }
 var invoke = {
-  selectionChange: (ctx) => {
+  valueChange: (ctx) => {
     ctx.onValueChange?.({
       value: Array.from(ctx.value),
       items: ctx.selectedItems
     });
-    ctx.inputValue = match(ctx.selectionBehavior, {
-      replace: ctx.valueAsString,
-      clear: "",
-      preserve: ctx.inputValue
+    const prevSelectedItems = ctx.selectedItems;
+    ctx.selectedItems = ctx.value.map((v) => {
+      const foundItem = prevSelectedItems.find((item) => ctx.collection.itemToValue(item) === v);
+      if (foundItem)
+        return foundItem;
+      return ctx.collection.item(v);
     });
+    const valueAsString = ctx.collection.itemsToString(ctx.selectedItems);
+    ctx.valueAsString = valueAsString;
+    let nextInputValue;
+    if (ctx.getSelectionValue) {
+      nextInputValue = ctx.getSelectionValue({
+        inputValue: ctx.inputValue,
+        selectedItems: Array.from(ctx.selectedItems),
+        valueAsString
+      });
+    } else {
+      nextInputValue = match(ctx.selectionBehavior, {
+        replace: ctx.valueAsString,
+        preserve: ctx.inputValue,
+        clear: ""
+      });
+    }
+    ctx.inputValue = nextInputValue;
+    invoke.inputChange(ctx);
   },
   highlightChange: (ctx) => {
     ctx.onHighlightChange?.({
       highlightedValue: ctx.highlightedValue,
       highligtedItem: ctx.highlightedItem
     });
+    ctx.highlightedItem = ctx.collection.item(ctx.highlightedValue);
   },
   inputChange: (ctx) => {
-    ctx.onInputValueChange?.({ value: ctx.inputValue });
+    ctx.onInputValueChange?.({ inputValue: ctx.inputValue });
   }
 };
 var set = {
@@ -1033,17 +1390,17 @@ var set = {
       return;
     if (value == null && force) {
       ctx.value = [];
-      invoke.selectionChange(ctx);
+      invoke.valueChange(ctx);
       return;
     }
     ctx.value = ctx.multiple ? addOrRemove(ctx.value, value) : [value];
-    invoke.selectionChange(ctx);
+    invoke.valueChange(ctx);
   },
   selectedItems: (ctx, value) => {
     if (isEqual(ctx.value, value))
       return;
     ctx.value = value;
-    invoke.selectionChange(ctx);
+    invoke.valueChange(ctx);
   },
   highlightedItem: (ctx, value, force = false) => {
     if (isEqual(ctx.highlightedValue, value))