@zag-js/combobox 1.15.4 → 1.15.6

package/dist/index.d.mts

@@ -257,6 +257,7 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         valueAsString: string;
     };
     computed: {
+        isCustomValue: boolean;
         isInputValueEmpty: boolean;
         isInteractive: boolean;
         autoComplete: boolean;

package/dist/index.d.ts

@@ -257,6 +257,7 @@ interface ComboboxSchema<T extends CollectionItem = CollectionItem> {
         valueAsString: string;
     };
     computed: {
+        isCustomValue: boolean;
         isInputValueEmpty: boolean;
         isInteractive: boolean;
         autoComplete: boolean;

package/dist/index.js

@@ -263,7 +263,8 @@ function connect(service, normalize) {
             },
             Enter(event3) {
               send({ type: "INPUT.ENTER", keypress });
-              if (open) {
+              const submittable = computed("isCustomValue") && prop("allowCustomValue");
+              if (open && !submittable) {
                 event3.preventDefault();
               }
               if (highlightedValue == null) return;
@@ -313,6 +314,7 @@ function connect(service, normalize) {
         onPointerDown(event2) {
           if (!interactive) return;
           if (event2.pointerType === "touch") return;
+          if (!domQuery.isLeftClick(event2)) return;
           event2.preventDefault();
           queueMicrotask(() => {
             getInputEl(scope)?.focus({ preventScroll: true });
@@ -352,6 +354,7 @@ function connect(service, normalize) {
         "aria-multiselectable": prop("multiple") && composite ? true : void 0,
         "data-empty": domQuery.dataAttr(collection2.size === 0),
         onPointerDown(event2) {
+          if (!domQuery.isLeftClick(event2)) return;
           event2.preventDefault();
         }
       });
@@ -378,6 +381,7 @@ function connect(service, normalize) {
         "aria-controls": getInputId(scope),
         hidden: !context.get("value").length,
         onPointerDown(event2) {
+          if (!domQuery.isLeftClick(event2)) return;
           event2.preventDefault();
         },
         onClick(event2) {
@@ -577,7 +581,8 @@ var machine = createMachine({
     isInteractive: ({ prop }) => !(prop("readOnly") || prop("disabled")),
     autoComplete: ({ prop }) => prop("inputBehavior") === "autocomplete",
     autoHighlight: ({ prop }) => prop("inputBehavior") === "autohighlight",
-    hasSelectedItems: ({ context }) => context.get("value").length > 0
+    hasSelectedItems: ({ context }) => context.get("value").length > 0,
+    isCustomValue: ({ context }) => context.get("inputValue") !== context.get("valueAsString")
   },
   watch({ context, prop, track, action }) {
     track([() => context.hash("value")], () => {
@@ -1112,7 +1117,7 @@ var machine = createMachine({
       autoHighlight: ({ computed }) => computed("autoHighlight"),
       isFirstItemHighlighted: ({ prop, context }) => prop("collection").firstValue === context.get("highlightedValue"),
       isLastItemHighlighted: ({ prop, context }) => prop("collection").lastValue === context.get("highlightedValue"),
-      isCustomValue: ({ context }) => context.get("inputValue") !== context.get("valueAsString"),
+      isCustomValue: ({ computed }) => computed("isCustomValue"),
       allowCustomValue: ({ prop }) => !!prop("allowCustomValue"),
       hasHighlightedItem: ({ context }) => context.get("highlightedValue") != null,
       closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { createAnatomy } from '@zag-js/anatomy';
 import { ListCollection } from '@zag-js/collection';
-import { raf, setCaretToEnd, observeAttributes, observeChildren, clickIfLink, scrollIntoView, query, dataAttr, ariaAttr, isDownloadingEvent, isOpeningInNewTab, isContextMenuEvent, getEventKey, isLeftClick, isComposingEvent, isAnchorElement } from '@zag-js/dom-query';
+import { raf, setCaretToEnd, observeAttributes, observeChildren, clickIfLink, scrollIntoView, query, dataAttr, ariaAttr, isDownloadingEvent, isOpeningInNewTab, isContextMenuEvent, isLeftClick, getEventKey, isComposingEvent, isAnchorElement } from '@zag-js/dom-query';
 import { getPlacement, getPlacementStyles } from '@zag-js/popper';
 import { match, remove, addOrRemove, isBoolean, isEqual, createSplitProps, ensure } from '@zag-js/utils';
 import { ariaHidden } from '@zag-js/aria-hidden';
@@ -261,7 +261,8 @@ function connect(service, normalize) {
             },
             Enter(event3) {
               send({ type: "INPUT.ENTER", keypress });
-              if (open) {
+              const submittable = computed("isCustomValue") && prop("allowCustomValue");
+              if (open && !submittable) {
                 event3.preventDefault();
               }
               if (highlightedValue == null) return;
@@ -311,6 +312,7 @@ function connect(service, normalize) {
         onPointerDown(event2) {
           if (!interactive) return;
           if (event2.pointerType === "touch") return;
+          if (!isLeftClick(event2)) return;
           event2.preventDefault();
           queueMicrotask(() => {
             getInputEl(scope)?.focus({ preventScroll: true });
@@ -350,6 +352,7 @@ function connect(service, normalize) {
         "aria-multiselectable": prop("multiple") && composite ? true : void 0,
         "data-empty": dataAttr(collection2.size === 0),
         onPointerDown(event2) {
+          if (!isLeftClick(event2)) return;
           event2.preventDefault();
         }
       });
@@ -376,6 +379,7 @@ function connect(service, normalize) {
         "aria-controls": getInputId(scope),
         hidden: !context.get("value").length,
         onPointerDown(event2) {
+          if (!isLeftClick(event2)) return;
           event2.preventDefault();
         },
         onClick(event2) {
@@ -575,7 +579,8 @@ var machine = createMachine({
     isInteractive: ({ prop }) => !(prop("readOnly") || prop("disabled")),
     autoComplete: ({ prop }) => prop("inputBehavior") === "autocomplete",
     autoHighlight: ({ prop }) => prop("inputBehavior") === "autohighlight",
-    hasSelectedItems: ({ context }) => context.get("value").length > 0
+    hasSelectedItems: ({ context }) => context.get("value").length > 0,
+    isCustomValue: ({ context }) => context.get("inputValue") !== context.get("valueAsString")
   },
   watch({ context, prop, track, action }) {
     track([() => context.hash("value")], () => {
@@ -1110,7 +1115,7 @@ var machine = createMachine({
       autoHighlight: ({ computed }) => computed("autoHighlight"),
       isFirstItemHighlighted: ({ prop, context }) => prop("collection").firstValue === context.get("highlightedValue"),
       isLastItemHighlighted: ({ prop, context }) => prop("collection").lastValue === context.get("highlightedValue"),
-      isCustomValue: ({ context }) => context.get("inputValue") !== context.get("valueAsString"),
+      isCustomValue: ({ computed }) => computed("isCustomValue"),
       allowCustomValue: ({ prop }) => !!prop("allowCustomValue"),
       hasHighlightedItem: ({ context }) => context.get("highlightedValue") != null,
       closeOnSelect: ({ prop }) => !!prop("closeOnSelect"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/combobox",
-  "version": "1.15.4",
+  "version": "1.15.6",
   "description": "Core logic for the combobox widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,15 +26,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.15.4",
-    "@zag-js/aria-hidden": "1.15.4",
-    "@zag-js/collection": "1.15.4",
-    "@zag-js/core": "1.15.4",
-    "@zag-js/dismissable": "1.15.4",
-    "@zag-js/dom-query": "1.15.4",
-    "@zag-js/utils": "1.15.4",
-    "@zag-js/popper": "1.15.4",
-    "@zag-js/types": "1.15.4"
+    "@zag-js/anatomy": "1.15.6",
+    "@zag-js/aria-hidden": "1.15.6",
+    "@zag-js/collection": "1.15.6",
+    "@zag-js/core": "1.15.6",
+    "@zag-js/dismissable": "1.15.6",
+    "@zag-js/dom-query": "1.15.6",
+    "@zag-js/utils": "1.15.6",
+    "@zag-js/popper": "1.15.6",
+    "@zag-js/types": "1.15.6"
   },
   "devDependencies": {
     "clean-package": "2.2.0"