@sprawlify/primitives 0.0.112 → 0.0.114

package/dist/machines/cascade-select/index.mjs

@@ -5,7 +5,7 @@ import { t as TreeCollection } from "../../collection-DgzidRvr.mjs";
 import { a as createMachine, i as createGuards } from "../../core-Ci9Yu6QI.mjs";
 import "../../interact-outside-Ba50N1a5.mjs";
 import { n as trackDismissableElement } from "../../dismissable-B9k5K6f9.mjs";
-import { o as trackFocusVisible, t as getInteractionModality } from "../../focus-visible-BuLf8M9F.mjs";
+import { a as setInteractionModality, o as trackFocusVisible, t as getInteractionModality } from "../../focus-visible-BuLf8M9F.mjs";
 import { n as getPlacement, t as getPlacementStyles } from "../../popper-BlgbmdAn.mjs";
 import { B as getRectCorners, D as closestSideToPoint, L as createPoint, R as createRect, i as isPointInPolygon } from "../../rect-utils-B5xqFvKC.mjs";
 import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
@@ -69,7 +69,7 @@ function connect(service, normalize) {
 	const disabled = prop("disabled") || context.get("fieldsetDisabled");
 	const interactive = computed("isInteractive");
 	const valueAsString = computed("valueAsString");
-	const highlightedItem = context.get("highlightedItem");
+	const highlightedItems = context.get("highlightedItems");
 	const selectedItems = context.get("selectedItems");
 	const popperStyles = getPlacementStyles({
 		...prop("positioning"),
@@ -94,6 +94,7 @@ function connect(service, normalize) {
 		};
 	};
 	const hasSelectedItems = value.length > 0;
+	const empty = value.length === 0;
 	return {
 		collection,
 		open,
@@ -102,9 +103,10 @@ function connect(service, normalize) {
 		disabled,
 		value,
 		highlightedValue,
-		highlightedItem,
+		highlightedItems,
 		selectedItems,
 		hasSelectedItems,
+		empty,
 		valueAsString,
 		reposition(options = {}) {
 			send({
@@ -119,12 +121,15 @@ function connect(service, normalize) {
 			if (nextOpen === open) return;
 			send({ type: nextOpen ? "OPEN" : "CLOSE" });
 		},
-		highlightValue(value) {
+		setHighlightValue(value) {
 			send({
 				type: "HIGHLIGHTED_VALUE.SET",
 				value
 			});
 		},
+		clearHighlightValue() {
+			send({ type: "HIGHLIGHTED_VALUE.CLEAR" });
+		},
 		setValue(value) {
 			send({
 				type: "VALUE.SET",
@@ -178,7 +183,7 @@ function connect(service, normalize) {
 				dir: prop("dir"),
 				id: dom.getControlId(scope),
 				"data-disabled": dataAttr(disabled),
-				"data-focused": dataAttr(focused),
+				"data-focus": dataAttr(focused),
 				"data-readonly": dataAttr(prop("readOnly")),
 				"data-invalid": dataAttr(prop("invalid")),
 				"data-state": open ? "open" : "closed"
@@ -199,8 +204,9 @@ function connect(service, normalize) {
 				"data-disabled": dataAttr(disabled),
 				"data-readonly": dataAttr(prop("readOnly")),
 				"data-invalid": dataAttr(prop("invalid")),
-				"data-focused": dataAttr(focused),
+				"data-focus": dataAttr(focused),
 				"data-placement": currentPlacement,
+				"data-placeholder-shown": dataAttr(!hasSelectedItems),
 				disabled,
 				onClick(event) {
 					if (event.defaultPrevented) return;
@@ -448,6 +454,15 @@ function connect(service, normalize) {
 				hidden: !itemState.selected
 			});
 		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(prop("invalid")),
+				"data-focus": dataAttr(focused)
+			});
+		},
 		getHiddenInputProps() {
 			const defaultValue = context.hash("value");
 			return normalize.input({
@@ -575,7 +590,7 @@ const machine = createMachine({
 				const value = prop("highlightedValue") ?? prop("defaultHighlightedValue") ?? null;
 				return { defaultValue: value ? prop("collection").getIndexPath(value) : [] };
 			}),
-			highlightedItem: bindable(() => ({ defaultValue: null })),
+			highlightedItems: bindable(() => ({ defaultValue: [] })),
 			selectedItems: bindable(() => ({ defaultValue: [] })),
 			currentPlacement: bindable(() => ({ defaultValue: void 0 })),
 			fieldsetDisabled: bindable(() => ({ defaultValue: false })),
@@ -615,6 +630,7 @@ const machine = createMachine({
 		"VALUE.CLEAR": { actions: ["clearValue"] },
 		"CLEAR_TRIGGER.CLICK": { actions: ["clearValue", "focusTriggerEl"] },
 		"HIGHLIGHTED_VALUE.SET": { actions: ["setHighlightedValue"] },
+		"HIGHLIGHTED_VALUE.CLEAR": { actions: ["clearHighlightedValue"] },
 		"ITEM.SELECT": { actions: ["selectItem"] },
 		"ITEM.CLEAR": { actions: ["clearItem"] }
 	},
@@ -901,8 +917,8 @@ const machine = createMachine({
 			},
 			shouldCloseOnSelectHighlighted: ({ prop, context }) => {
 				const collection = prop("collection");
-				const node = context.get("highlightedItem");
-				return prop("closeOnSelect") && !collection.isBranchNode(node);
+				const node = last(context.get("highlightedItems"));
+				return prop("closeOnSelect") && node != null && !collection.isBranchNode(node);
 			},
 			canSelectItem: ({ prop, event }) => {
 				const collection = prop("collection");
@@ -1014,7 +1030,7 @@ const machine = createMachine({
 					const highlightedValue = context.get("highlightedValue");
 					const highlightedIndexPath = context.get("highlightedIndexPath");
 					if (!highlightedIndexPath.length) return;
-					if (getInteractionModality() !== "keyboard") return;
+					if (getInteractionModality() === "pointer") return;
 					dom.getListEls(scope).forEach((listEl, index) => {
 						const itemPath = highlightedIndexPath.slice(0, index + 1);
 						const itemEl = dom.getItemEl(scope, highlightedValue.toString());
@@ -1037,7 +1053,10 @@ const machine = createMachine({
 						cleanups.push(raf_cleanup);
 					});
 				};
-				raf(() => exec(true));
+				raf(() => {
+					setInteractionModality("virtual");
+					exec(true);
+				});
 				const rafCleanup = raf(() => exec(true));
 				cleanups.push(rafCleanup);
 				const observerCleanup = observeAttributes(dom.getContentEl(scope), {
@@ -1218,11 +1237,17 @@ const machine = createMachine({
 					dom.getTriggerEl(scope)?.focus({ preventScroll: true });
 				});
 			},
-			invokeOnOpen({ prop }) {
-				prop("onOpenChange")?.({ open: true });
+			invokeOnOpen({ prop, context }) {
+				prop("onOpenChange")?.({
+					open: true,
+					value: context.get("value")
+				});
 			},
-			invokeOnClose({ prop }) {
-				prop("onOpenChange")?.({ open: false });
+			invokeOnClose({ prop, context }) {
+				prop("onOpenChange")?.({
+					open: false,
+					value: context.get("value")
+				});
 			},
 			toggleVisibility({ send, prop }) {
 				if (prop("open") != null) send({ type: prop("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE" });
@@ -1308,16 +1333,16 @@ const set = {
 	highlightedValue({ context, prop }, value) {
 		const collection = prop("collection");
 		context.set("highlightedValue", value);
-		const highlightedIndexPath = value == null ? [] : collection.getIndexPath(value);
+		const highlightedIndexPath = (value == null ? [] : collection.getIndexPath(value)) ?? [];
 		context.set("highlightedIndexPath", highlightedIndexPath);
-		const highlightedItem = highlightedIndexPath.map((_, index) => {
+		const highlightedItems = highlightedIndexPath.map((_, index) => {
 			const partialPath = highlightedIndexPath.slice(0, index + 1);
 			return collection.at(partialPath);
 		});
-		context.set("highlightedItem", highlightedItem);
+		context.set("highlightedItems", highlightedItems);
 		prop("onHighlightChange")?.({
-			value,
-			items: highlightedItem
+			highlightedValue: value,
+			highlightedItems
 		});
 	}
 };

package/dist/machines/checkbox/index.cjs

@@ -40,7 +40,6 @@ function connect(service, normalize) {
 		"data-invalid": require_dom_query.dataAttr(invalid),
 		"data-required": require_dom_query.dataAttr(required)
 	};
-	const ariaAttrs = { "aria-checked": indeterminate ? "mixed" : checked };
 	return {
 		checked,
 		disabled,
@@ -65,7 +64,6 @@ function connect(service, normalize) {
 			return normalize.label({
 				...parts.root.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				id: getRootId(scope),
 				htmlFor: getHiddenInputId(scope),
@@ -92,7 +90,6 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.label.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				id: getLabelId(scope)
 			});
@@ -101,7 +98,6 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.control.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				id: getControlId(scope),
 				"aria-hidden": true
@@ -111,7 +107,6 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.indicator.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				hidden: !indeterminate && !checked
 			});

package/dist/machines/checkbox/index.mjs

@@ -39,7 +39,6 @@ function connect(service, normalize) {
 		"data-invalid": dataAttr(invalid),
 		"data-required": dataAttr(required)
 	};
-	const ariaAttrs = { "aria-checked": indeterminate ? "mixed" : checked };
 	return {
 		checked,
 		disabled,
@@ -64,7 +63,6 @@ function connect(service, normalize) {
 			return normalize.label({
 				...parts.root.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				id: getRootId(scope),
 				htmlFor: getHiddenInputId(scope),
@@ -91,7 +89,6 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.label.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				id: getLabelId(scope)
 			});
@@ -100,7 +97,6 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.control.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				id: getControlId(scope),
 				"aria-hidden": true
@@ -110,7 +106,6 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.indicator.attrs,
 				...dataAttrs,
-				...ariaAttrs,
 				dir: prop("dir"),
 				hidden: !indeterminate && !checked
 			});

package/dist/machines/clipboard/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-B24gMTKq.cjs";
 import { b as NormalizeProps, g as RequiredBy, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/clipboard/clipboard.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control" | "input" | "trigger">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "indicator" | "input" | "label" | "control">;
 //#endregion
 //#region src/machines/clipboard/clipboard.types.d.ts
 interface CopyStatusDetails {

package/dist/machines/clipboard/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-DUM9rzfD.mjs";
 import { b as NormalizeProps, g as RequiredBy, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/clipboard/clipboard.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "label" | "control" | "input" | "trigger">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "indicator" | "input" | "label" | "control">;
 //#endregion
 //#region src/machines/clipboard/clipboard.types.d.ts
 interface CopyStatusDetails {

package/dist/machines/collapsible/index.d.cts

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-B24gMTKq.cjs";
 import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-CLRsezW5.cjs";
 
 //#region src/machines/collapsible/collapsible.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "content" | "trigger">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "indicator">;
 //#endregion
 //#region src/machines/collapsible/collapsible.types.d.ts
 interface OpenChangeDetails {

package/dist/machines/collapsible/index.d.mts

@@ -3,7 +3,7 @@ import { p as Machine, y as Service } from "../../types-DUM9rzfD.mjs";
 import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-BVFlU3b9.mjs";
 
 //#region src/machines/collapsible/collapsible.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "indicator" | "content" | "trigger">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "indicator">;
 //#endregion
 //#region src/machines/collapsible/collapsible.types.d.ts
 interface OpenChangeDetails {

package/dist/machines/color-picker/index.d.cts

@@ -6,7 +6,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { d as PositioningOptions } from "../../types-CZAtqGqH.cjs";
 
 //#region src/machines/color-picker/color-picker.anatomy.d.ts
-declare const anatomy: Anatomy<"root" | "label" | "control" | "content" | "trigger" | "area" | "valueText" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: Anatomy<"root" | "trigger" | "content" | "label" | "control" | "area" | "positioner" | "valueText" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 //#endregion
 //#region src/machines/color-picker/color-picker.types.d.ts
 type ExtendedColorChannel = ColorChannel | "hex" | "css";

package/dist/machines/color-picker/index.d.mts

@@ -6,7 +6,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { p as PositioningOptions } from "../../index-fMh0VDkR.mjs";
 
 //#region src/machines/color-picker/color-picker.anatomy.d.ts
-declare const anatomy: Anatomy<"root" | "label" | "control" | "content" | "trigger" | "area" | "valueText" | "positioner" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const anatomy: Anatomy<"root" | "trigger" | "content" | "label" | "control" | "area" | "positioner" | "valueText" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 //#endregion
 //#region src/machines/color-picker/color-picker.types.d.ts
 type ExtendedColorChannel = ColorChannel | "hex" | "css";

package/dist/machines/combobox/index.cjs

@@ -46,8 +46,8 @@ const getItemEl = (ctx, value) => {
 };
 const focusInputEl = (ctx) => {
 	const inputEl = getInputEl(ctx);
-	if (ctx.isActiveElement(inputEl)) return;
-	inputEl?.focus({ preventScroll: true });
+	if (!ctx.isActiveElement(inputEl)) inputEl?.focus({ preventScroll: true });
+	require_dom_query.setCaretToEnd(inputEl);
 };
 const focusTriggerEl = (ctx) => {
 	const triggerEl = getTriggerEl(ctx);
@@ -74,12 +74,12 @@ function connect(service, normalize) {
 		placement: context.get("currentPlacement")
 	});
 	function getItemState(props) {
-		const disabled = collection.getItemDisabled(props.item);
+		const itemDisabled = collection.getItemDisabled(props.item);
 		const value = collection.getItemValue(props.item);
 		require_utils.ensure(value, () => `[sprawlify-js] No value found for item ${JSON.stringify(props.item)}`);
 		return {
 			value,
-			disabled: Boolean(disabled || disabled),
+			disabled: Boolean(disabled || itemDisabled),
 			highlighted: highlightedValue === value,
 			selected: context.get("value").includes(value)
 		};
@@ -359,7 +359,7 @@ function connect(service, normalize) {
 					if (!require_dom_query.isLeftClick(event)) return;
 					event.preventDefault();
 					queueMicrotask(() => {
-						getInputEl(scope)?.focus({ preventScroll: true });
+						focusInputEl(scope);
 					});
 				},
 				onKeyDown(event) {
@@ -581,7 +581,7 @@ const machine = createMachine({
 					const context = getContext();
 					const prevSelectedItems = context.get("selectedItems");
 					const collection = prop("collection");
-					const nextItems = value.map((v) => {
+					const nextItems = (prop("value") || value).map((v) => {
 						return prevSelectedItems.find((item) => collection.getItemValue(item) === v) || collection.find(v);
 					});
 					context.set("selectedItems", nextItems);
@@ -799,8 +799,7 @@ const machine = createMachine({
 				],
 				"INPUT.ARROW_UP": [
 					{
-						guard: "autoComplete",
-						target: "interacting",
+						guard: and("isOpenControlled", "autoComplete"),
 						actions: ["invokeOnOpen"]
 					},
 					{
@@ -809,7 +808,7 @@ const machine = createMachine({
 						actions: ["invokeOnOpen"]
 					},
 					{
-						target: "interacting",
+						guard: "isOpenControlled",
 						actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
 					},
 					{
@@ -1205,7 +1204,7 @@ const machine = createMachine({
 				const inputEl = getInputEl(scope);
 				let cleanups = [];
 				const exec = (immediate) => {
-					if (require_focus_visible.getInteractionModality() !== "keyboard") return;
+					if (require_focus_visible.getInteractionModality() === "pointer") return;
 					const highlightedValue = context.get("highlightedValue");
 					if (!highlightedValue) return;
 					const contentEl = getContentEl(scope);
@@ -1227,7 +1226,10 @@ const machine = createMachine({
 					});
 					cleanups.push(raf_cleanup);
 				};
-				const rafCleanup = require_dom_query.raf(() => exec(true));
+				const rafCleanup = require_dom_query.raf(() => {
+					require_focus_visible.setInteractionModality("virtual");
+					exec(true);
+				});
 				cleanups.push(rafCleanup);
 				const observerCleanup = require_dom_query.observeAttributes(inputEl, {
 					attributes: ["aria-activedescendant"],

package/dist/machines/combobox/index.d.cts

@@ -7,7 +7,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { c as Placement, d as PositioningOptions } from "../../types-CZAtqGqH.cjs";
 
 //#region src/machines/combobox/combobox.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "item" | "itemIndicator" | "input" | "itemText" | "trigger" | "itemGroup" | "clearTrigger" | "positioner" | "list" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "input" | "label" | "control" | "item" | "itemIndicator" | "itemGroup" | "positioner" | "clearTrigger" | "itemText" | "list" | "itemGroupLabel">;
 //#endregion
 //#region src/machines/combobox/combobox.collection.d.ts
 declare const collection: {

package/dist/machines/combobox/index.d.mts

@@ -7,7 +7,7 @@ import { c as PointerDownOutsideEvent, i as InteractOutsideHandlers, n as FocusO
 import { p as PositioningOptions, u as Placement } from "../../index-fMh0VDkR.mjs";
 
 //#region src/machines/combobox/combobox.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "control" | "content" | "item" | "itemIndicator" | "input" | "itemText" | "trigger" | "itemGroup" | "clearTrigger" | "positioner" | "list" | "itemGroupLabel">;
+declare const anatomy: AnatomyInstance<"root" | "trigger" | "content" | "input" | "label" | "control" | "item" | "itemIndicator" | "itemGroup" | "positioner" | "clearTrigger" | "itemText" | "list" | "itemGroupLabel">;
 //#endregion
 //#region src/machines/combobox/combobox.collection.d.ts
 declare const collection: {

package/dist/machines/combobox/index.mjs

@@ -5,7 +5,7 @@ import { s as ListCollection } from "../../collection-DgzidRvr.mjs";
 import { o as setup } from "../../core-Ci9Yu6QI.mjs";
 import "../../interact-outside-Ba50N1a5.mjs";
 import { n as trackDismissableElement } from "../../dismissable-B9k5K6f9.mjs";
-import { o as trackFocusVisible, t as getInteractionModality } from "../../focus-visible-BuLf8M9F.mjs";
+import { a as setInteractionModality, o as trackFocusVisible, t as getInteractionModality } from "../../focus-visible-BuLf8M9F.mjs";
 import { n as getPlacement, t as getPlacementStyles } from "../../popper-BlgbmdAn.mjs";
 import { t as createProps } from "../../create-props-DFW8DUsC.mjs";
 //#region src/machines/combobox/combobox.anatomy.ts
@@ -45,8 +45,8 @@ const getItemEl = (ctx, value) => {
 };
 const focusInputEl = (ctx) => {
 	const inputEl = getInputEl(ctx);
-	if (ctx.isActiveElement(inputEl)) return;
-	inputEl?.focus({ preventScroll: true });
+	if (!ctx.isActiveElement(inputEl)) inputEl?.focus({ preventScroll: true });
+	setCaretToEnd(inputEl);
 };
 const focusTriggerEl = (ctx) => {
 	const triggerEl = getTriggerEl(ctx);
@@ -73,12 +73,12 @@ function connect(service, normalize) {
 		placement: context.get("currentPlacement")
 	});
 	function getItemState(props) {
-		const disabled = collection.getItemDisabled(props.item);
+		const itemDisabled = collection.getItemDisabled(props.item);
 		const value = collection.getItemValue(props.item);
 		ensure(value, () => `[sprawlify-js] No value found for item ${JSON.stringify(props.item)}`);
 		return {
 			value,
-			disabled: Boolean(disabled || disabled),
+			disabled: Boolean(disabled || itemDisabled),
 			highlighted: highlightedValue === value,
 			selected: context.get("value").includes(value)
 		};
@@ -358,7 +358,7 @@ function connect(service, normalize) {
 					if (!isLeftClick(event)) return;
 					event.preventDefault();
 					queueMicrotask(() => {
-						getInputEl(scope)?.focus({ preventScroll: true });
+						focusInputEl(scope);
 					});
 				},
 				onKeyDown(event) {
@@ -580,7 +580,7 @@ const machine = createMachine({
 					const context = getContext();
 					const prevSelectedItems = context.get("selectedItems");
 					const collection = prop("collection");
-					const nextItems = value.map((v) => {
+					const nextItems = (prop("value") || value).map((v) => {
 						return prevSelectedItems.find((item) => collection.getItemValue(item) === v) || collection.find(v);
 					});
 					context.set("selectedItems", nextItems);
@@ -798,8 +798,7 @@ const machine = createMachine({
 				],
 				"INPUT.ARROW_UP": [
 					{
-						guard: "autoComplete",
-						target: "interacting",
+						guard: and("isOpenControlled", "autoComplete"),
 						actions: ["invokeOnOpen"]
 					},
 					{
@@ -808,7 +807,7 @@ const machine = createMachine({
 						actions: ["invokeOnOpen"]
 					},
 					{
-						target: "interacting",
+						guard: "isOpenControlled",
 						actions: ["highlightLastOrSelectedItem", "invokeOnOpen"]
 					},
 					{
@@ -1204,7 +1203,7 @@ const machine = createMachine({
 				const inputEl = getInputEl(scope);
 				let cleanups = [];
 				const exec = (immediate) => {
-					if (getInteractionModality() !== "keyboard") return;
+					if (getInteractionModality() === "pointer") return;
 					const highlightedValue = context.get("highlightedValue");
 					if (!highlightedValue) return;
 					const contentEl = getContentEl(scope);
@@ -1226,7 +1225,10 @@ const machine = createMachine({
 					});
 					cleanups.push(raf_cleanup);
 				};
-				const rafCleanup = raf(() => exec(true));
+				const rafCleanup = raf(() => {
+					setInteractionModality("virtual");
+					exec(true);
+				});
 				cleanups.push(rafCleanup);
 				const observerCleanup = observeAttributes(inputEl, {
 					attributes: ["aria-activedescendant"],