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; }