diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 7d61f308a65..00d1f5ae4db 100644 --- 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 index fe400345d32..3d409ca85d4 100644 --- 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(); } }