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

…ent (#9618)

**Related Issue:** #9617

## Summary

- if no filtered items are displayed, the combobox should not be opened
- adds test

packages/calcite-components/src/components/combobox/combobox.e2e.ts

@@ -210,6 +210,31 @@ describe("calcite-combobox", () => {
     expect(await combobox.getProperty("open")).toBe(false);
   });
 
+  it("should not toggle the combobox when typing within the input does not match any results", async () => {
+    const page = await newE2EPage();
+
+    await page.setContent(html`
+      <calcite-combobox id="myCombobox">
+        <calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
+        <calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
+        <calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
+        <calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
+      </calcite-combobox>
+    `);
+
+    const combobox = await page.find("calcite-combobox");
+    await combobox.callMethod("setFocus");
+    await page.waitForChanges();
+    expect(await combobox.getProperty("open")).toBe(false);
+
+    const text = "nomatchingtexthere";
+
+    await combobox.type(text);
+    await page.waitForChanges();
+
+    expect(await combobox.getProperty("open")).toBe(false);
+  });
+
   it("filtering does not match property with value of undefined", async () => {
     const page = await newE2EPage();
 

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, setOpenToEmptyState = false): void => {
       const filteredData = filter(this.data, text);
       const itemsAndGroups = this.getItemsAndGroups();
 
@@ -1090,6 +1089,11 @@ export class Combobox
       });
 
       this.filteredItems = this.getFilteredItems();
+
+      if (setOpenToEmptyState) {
+        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();
     }
   }