@threadlabs/looma 0.23.10 → 0.23.11

package/components/ui-combobox/ui-combobox.html

@@ -54,6 +54,12 @@
     >How the list narrows as the user types. label lists the options whose label contains the typed text, ignoring case. none lists every authored option, for
       options already narrowed elsewhere, such as a server search, so a result that matched on data other than its label still shows. Leaving the field still
       commits an option whose label matches the text, or the only one listed.</prop>
+    <prop name="autoHighlight" type="keyword" values="none, single" default="none"
+    >single highlights the only enabled authored suggestion while typing. Ambiguous results and an empty query stay unhighlighted. none preserves manual
+      highlighting with the arrow keys.</prop>
+    <prop name="selectOnTab" type="boolean" default="false"
+    >Commits a highlighted authored suggestion on forward Tab, then lets focus advance normally. In multiple mode a selected suggestion is retained without
+      duplication or removal. Shift+Tab does not commit, and Tab never chooses the create offer.</prop>
     <prop name="allowFreeText" type="boolean" default="false">Allows values that do not match an authored option.</prop>
     <prop name="allowCreate" type="boolean" default="false"
     >Offers the current query as a new option, reported as create-item. When nothing else matches, the offer is highlighted, so Enter creates it; with nothing

package/components/ui-combobox/ui-combobox.js

@@ -174,6 +174,10 @@ export default function controller(host) {
       // When nothing matches what was typed, the offer to create it is the only choice, so it is
       // the one Enter makes, and it is highlighted as such.
       if (query && !host.state.rows.some((row) => !row.disabled) && canCreate()) host.state.active = host.state.rows.length;
+      if (query && host.props.autoHighlight.value === "single") {
+        const enabled = host.state.rows.flatMap((row, index) => row.disabled ? [] : [index]);
+        if (enabled.length === 1) host.state.active = enabled[0];
+      }
       // Options in their declared shape: a row's `selected` flag is the list's own view state.
       host.dispatch("options-change", host.state.rows.map(asItem));
     };
@@ -441,7 +445,19 @@ export default function controller(host) {
       if (!host.state.raw && (input.selectionStart ?? 0) === 0 && event.key === "Backspace" && items().length) { event.preventDefault(); removeItemAt(items().length - 1, "keyboard"); return; }
     }
     if (event.key === "Escape" && host.state.expanded) { event.preventDefault(); event.stopPropagation(); close(); }
-    else if (event.key === "Tab") { resolveTyped("keyboard"); close(); }
+    else if (event.key === "Tab") {
+      const highlighted = host.state.expanded ? (host.state.rows ?? [])[host.state.active] : undefined;
+      if (host.props.selectOnTab.value && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey && highlighted && !highlighted.disabled) {
+        if (host.props.multiple.value) {
+          setMultiQuery("", "keyboard");
+          if (!selectedSet().has(highlighted.value)) addSelectedItem(highlighted, "keyboard");
+        } else {
+          commit(highlighted.value, highlighted.label, asItem(highlighted), "selection", "keyboard");
+          queueMicrotask(() => void validateCurrent());
+        }
+      } else if (!host.props.selectOnTab.value) resolveTyped("keyboard");
+      close();
+    }
     else if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && ["ArrowDown", "ArrowUp"].includes(event.key)) { event.preventDefault(); if (!host.state.expanded) open("disclosure"); move(event.key); }
     else if (["Home", "End"].includes(event.key) && host.state.expanded && host.state.active >= 0) { event.preventDefault(); move(event.key); }
     else if (event.key === "Enter" && host.state.expanded) {