diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index 552a8787e56..632cf66f4a3 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -178,17 +178,49 @@ describe("calcite-combobox", () => {
openClose(simpleComboboxHTML);
});
+ it("should toggle the combobox when typing within the input", async () => {
+ const page = await newE2EPage();
+
+ await page.setContent(html`
+
+
+
+
+
+
+ `);
+
+ const combobox = await page.find("calcite-combobox");
+ await combobox.callMethod("setFocus");
+ await page.waitForChanges();
+ expect(await combobox.getProperty("open")).toBe(false);
+
+ const text = "Arizona";
+
+ await combobox.type(text);
+ await page.waitForChanges();
+
+ expect(await combobox.getProperty("open")).toBe(true);
+
+ for (let i = 0; i < text.length; i++) {
+ await combobox.press("Backspace");
+ }
+
+ 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({
- html: html`
-
-
-
-
-
-
- `,
- });
+ const page = await newE2EPage();
+
+ await page.setContent(html`
+
+
+
+
+
+
+ `);
const combobox = await page.find("calcite-combobox");
const input = await page.find("calcite-combobox >>> input");
@@ -206,16 +238,16 @@ describe("calcite-combobox", () => {
});
it("should filter the items in listbox when typing into the input", async () => {
- const page = await newE2EPage({
- html: html`
-
-
-
-
-
-
- `,
- });
+ const page = await newE2EPage();
+
+ await page.setContent(html`
+
+
+
+
+
+
+ `);
const combobox = await page.find("calcite-combobox");
const input = await page.find("calcite-combobox >>> input");
@@ -655,11 +687,13 @@ describe("calcite-combobox", () => {
});
it("should honor calciteComboboxChipClose", async () => {
- const page = await newE2EPage({
- html: `
-
- `,
- });
+ const page = await newE2EPage();
+
+ await page.setContent(
+ html`
+
+ `,
+ );
const eventSpy = await page.spyOnEvent("calciteComboboxChipClose", "window");
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 4e1a1213b38..fe400345d32 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1054,6 +1054,7 @@ export class Combobox
const value = (event.target as HTMLInputElement).value;
this.text = value;
this.filterItems(value);
+ this.open = value.length > 0;
if (value) {
this.activeChipIndex = -1;
}