@threadlabs/looma 0.14.7 → 0.14.8

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

@@ -33,6 +33,10 @@
     <prop name="query" type="string"
     >The input's text, when the consumer controls it. Once set, the consumer owns the text: typing reports query-change, and the input returns to query unless
       query is updated to match. Leave it unset to let the combobox manage its own text, showing the chosen option's label.</prop>
+    <prop name="filter" type="label | none" default="label"
+    >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="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

@@ -55,6 +55,8 @@ export default function controller(host) {
     options: authoredOptions(authored),
     allowFreeText: Boolean(host.state.allowFreeText),
     allowCreate: Boolean(host.state.allowCreate),
+    // "none": the consumer already narrowed the options (a server search), so every one is listed.
+    filterByLabel: host.state.filter !== "none",
   });
   // Selected items work uncontrolled: the component keeps them and reports every change. A consumer
   // that owns `items` stays in charge, because the prop resyncs whatever it sets. A consumer that sets
@@ -149,7 +151,7 @@ export default function controller(host) {
       const filtered = options.filter((option) => {
         if (ids.has(option.id)) return false;
         ids.add(option.id);
-        if (fullSet) return true;
+        if (fullSet || !current.filterByLabel) return true;
         return option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase());
       }).map((option) => ({
         ...option,
@@ -267,7 +269,8 @@ export default function controller(host) {
   };
   // A strict combobox (single, no free text, no create) behaves like a select: leaving it resolves the
   // typed text to a valid option (the highlighted one, an exact label, the first label it begins, or the
-  // only remaining option); with no match it reverts to the previous selection, or clears.
+  // only remaining option); with no match it reverts to the previous selection, or clears. With filter
+  // "none" the remaining options are all of them, whatever their labels, so the only one listed counts.
   const resolveTyped = (trigger) => {
     const current = config();
     if (host.state.multiple || current.allowFreeText || current.allowCreate) return;
@@ -285,7 +288,7 @@ export default function controller(host) {
         ?? enabled.find((row) => row.label.toLocaleLowerCase() === query)
         ?? enabled.find((row) => row.label.toLocaleLowerCase().startsWith(query))
         ?? (() => {
-          const containing = enabled.filter((option) => option.label.toLocaleLowerCase().includes(query));
+          const containing = current.filterByLabel ? enabled.filter((option) => option.label.toLocaleLowerCase().includes(query)) : enabled;
           return containing.length === 1 ? containing[0] : undefined;
         })();
     if (match) commit(match.value, match.label, match, "selection", trigger);