@zag-js/combobox 1.22.1 → 1.24.0

package/dist/index.d.mts

@@ -180,6 +180,12 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
      * Whether to allow typing custom values in the input
      */
     allowCustomValue?: boolean | undefined;
+    /**
+     * Whether to always submit on Enter key press, even if popup is open.
+     * Useful for single-field autocomplete forms where Enter should submit the form.
+     * @default false
+     */
+    alwaysSubmitOnEnter?: boolean | undefined;
     /**
      * Whether to loop the keyboard navigation through the items
      * @default true

package/dist/index.d.ts

@@ -180,6 +180,12 @@ interface ComboboxProps<T extends CollectionItem = CollectionItem> extends Direc
      * Whether to allow typing custom values in the input
      */
     allowCustomValue?: boolean | undefined;
+    /**
+     * Whether to always submit on Enter key press, even if popup is open.
+     * Useful for single-field autocomplete forms where Enter should submit the form.
+     * @default false
+     */
+    alwaysSubmitOnEnter?: boolean | undefined;
     /**
      * Whether to loop the keyboard navigation through the items
      * @default true

package/dist/index.js

@@ -72,10 +72,11 @@ function connect(service, normalize) {
   const { context, prop, state, send, scope, computed, event } = service;
   const translations = prop("translations");
   const collection2 = prop("collection");
-  const disabled = prop("disabled");
+  const disabled = !!prop("disabled");
   const interactive = computed("isInteractive");
-  const invalid = prop("invalid");
-  const readOnly = prop("readOnly");
+  const invalid = !!prop("invalid");
+  const required = !!prop("required");
+  const readOnly = !!prop("readOnly");
   const open = state.hasTag("open");
   const focused = state.hasTag("focused");
   const composite = prop("composite");
@@ -162,6 +163,7 @@ function connect(service, normalize) {
         "data-readonly": domQuery.dataAttr(readOnly),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-invalid": domQuery.dataAttr(invalid),
+        "data-required": domQuery.dataAttr(required),
         "data-focus": domQuery.dataAttr(focused),
         onClick(event2) {
           if (composite) return;
@@ -267,7 +269,9 @@ function connect(service, normalize) {
             Enter(event3) {
               send({ type: "INPUT.ENTER", keypress, src: "item-select" });
               const submittable = computed("isCustomValue") && prop("allowCustomValue");
-              if (open && !submittable) {
+              const hasHighlight = highlightedValue != null;
+              const alwaysSubmit = prop("alwaysSubmitOnEnter");
+              if (open && !submittable && !alwaysSubmit && hasHighlight) {
                 event3.preventDefault();
               }
               if (highlightedValue == null) return;
@@ -484,6 +488,7 @@ var machine = createMachine({
       defaultValue: [],
       closeOnSelect: !props2.multiple,
       allowCustomValue: false,
+      alwaysSubmitOnEnter: false,
       inputBehavior: "none",
       selectionBehavior: props2.multiple ? "clear" : "replace",
       openOnKeyPress: true,
@@ -1152,6 +1157,7 @@ var machine = createMachine({
         if (prop("disableLayer")) return;
         const contentEl = () => getContentEl(scope);
         return dismissable.trackDismissableElement(contentEl, {
+          type: "listbox",
           defer: true,
           exclude: () => [getInputEl(scope), getTriggerEl(scope), getClearTriggerEl(scope)],
           onFocusOutside: prop("onFocusOutside"),
@@ -1549,7 +1555,8 @@ var props = types.createProps()([
   "scrollToIndexFn",
   "selectionBehavior",
   "translations",
-  "value"
+  "value",
+  "alwaysSubmitOnEnter"
 ]);
 var splitProps = utils.createSplitProps(props);
 var itemGroupLabelProps = types.createProps()(["htmlFor"]);

package/dist/index.mjs

@@ -70,10 +70,11 @@ function connect(service, normalize) {
   const { context, prop, state, send, scope, computed, event } = service;
   const translations = prop("translations");
   const collection2 = prop("collection");
-  const disabled = prop("disabled");
+  const disabled = !!prop("disabled");
   const interactive = computed("isInteractive");
-  const invalid = prop("invalid");
-  const readOnly = prop("readOnly");
+  const invalid = !!prop("invalid");
+  const required = !!prop("required");
+  const readOnly = !!prop("readOnly");
   const open = state.hasTag("open");
   const focused = state.hasTag("focused");
   const composite = prop("composite");
@@ -160,6 +161,7 @@ function connect(service, normalize) {
         "data-readonly": dataAttr(readOnly),
         "data-disabled": dataAttr(disabled),
         "data-invalid": dataAttr(invalid),
+        "data-required": dataAttr(required),
         "data-focus": dataAttr(focused),
         onClick(event2) {
           if (composite) return;
@@ -265,7 +267,9 @@ function connect(service, normalize) {
             Enter(event3) {
               send({ type: "INPUT.ENTER", keypress, src: "item-select" });
               const submittable = computed("isCustomValue") && prop("allowCustomValue");
-              if (open && !submittable) {
+              const hasHighlight = highlightedValue != null;
+              const alwaysSubmit = prop("alwaysSubmitOnEnter");
+              if (open && !submittable && !alwaysSubmit && hasHighlight) {
                 event3.preventDefault();
               }
               if (highlightedValue == null) return;
@@ -482,6 +486,7 @@ var machine = createMachine({
       defaultValue: [],
       closeOnSelect: !props2.multiple,
       allowCustomValue: false,
+      alwaysSubmitOnEnter: false,
       inputBehavior: "none",
       selectionBehavior: props2.multiple ? "clear" : "replace",
       openOnKeyPress: true,
@@ -1150,6 +1155,7 @@ var machine = createMachine({
         if (prop("disableLayer")) return;
         const contentEl = () => getContentEl(scope);
         return trackDismissableElement(contentEl, {
+          type: "listbox",
           defer: true,
           exclude: () => [getInputEl(scope), getTriggerEl(scope), getClearTriggerEl(scope)],
           onFocusOutside: prop("onFocusOutside"),
@@ -1547,7 +1553,8 @@ var props = createProps()([
   "scrollToIndexFn",
   "selectionBehavior",
   "translations",
-  "value"
+  "value",
+  "alwaysSubmitOnEnter"
 ]);
 var splitProps = createSplitProps(props);
 var itemGroupLabelProps = createProps()(["htmlFor"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/combobox",
-  "version": "1.22.1",
+  "version": "1.24.0",
   "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.22.1",
-    "@zag-js/aria-hidden": "1.22.1",
-    "@zag-js/collection": "1.22.1",
-    "@zag-js/core": "1.22.1",
-    "@zag-js/dismissable": "1.22.1",
-    "@zag-js/dom-query": "1.22.1",
-    "@zag-js/utils": "1.22.1",
-    "@zag-js/popper": "1.22.1",
-    "@zag-js/types": "1.22.1"
+    "@zag-js/anatomy": "1.24.0",
+    "@zag-js/aria-hidden": "1.24.0",
+    "@zag-js/collection": "1.24.0",
+    "@zag-js/core": "1.24.0",
+    "@zag-js/dismissable": "1.24.0",
+    "@zag-js/dom-query": "1.24.0",
+    "@zag-js/utils": "1.24.0",
+    "@zag-js/popper": "1.24.0",
+    "@zag-js/types": "1.24.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"