fix(combobox): only open when text exists and filtered items are pres…

…ent.
Esri · Jun 17, 2024 · 2ba7b5a · 2ba7b5a
1 parent 801152c
commit 2ba7b5a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -1806,7 +1806,7 @@ export namespace Components {
          */
         "items": object[];
         /**
-          * Specifies the fields to match against when filtering.
+          * Specifies the fields to match against when filtering. This will only apply when `value` is an object. If not set, all fields will be matched.
          */
         "matchFields": string[];
         /**
@@ -9622,7 +9622,7 @@ declare namespace LocalJSX {
          */
         "items"?: object[];
         /**
-          * Specifies the fields to match against when filtering.
+          * Specifies the fields to match against when filtering. This will only apply when `value` is an object. If not set, all fields will be matched.
          */
         "matchFields"?: string[];
         /**

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1053,8 +1053,7 @@ export class Combobox
   inputHandler = (event: Event): void => {
     const value = (event.target as HTMLInputElement).value;
     this.text = value;
-    this.filterItems(value);
-    this.open = value.length > 0;
+    this.filterItems(value, true);
     if (value) {
       this.activeChipIndex = -1;
     }
@@ -1071,7 +1070,7 @@ export class Combobox
         isGroup(item) ? label === item.label : value === item.value && label === item.textLabel,
       );
 
-    return debounce((text: string): void => {
+    return debounce((text: string, updateOpen = false): void => {
       const filteredData = filter(this.data, text);
       const itemsAndGroups = this.getItemsAndGroups();
 
@@ -1090,6 +1089,11 @@ export class Combobox
       });
 
       this.filteredItems = this.getFilteredItems();
+
+      if (updateOpen) {
+        this.open = this.text.trim().length > 0 && this.filteredItems.length > 0;
+      }
+
       this.calciteComboboxFilterChange.emit();
     }, 100);
   })();
@@ -1259,6 +1263,7 @@ export class Combobox
       }
       this.updateItems();
       this.filterItems("");
+      this.open = true;
       this.emitComboboxChange();
     }
   }