From 96a55a1e6d90128a8a3c6f9a3b85cb5dec6d5815 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 7 Jun 2024 17:03:13 -0700 Subject: [PATCH 1/3] fix(combobox): open the combobox when typing. #9401 --- packages/calcite-components/src/components/combobox/combobox.tsx | 1 + 1 file changed, 1 insertion(+) 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; } From 01c75f1f077d59d068943e0ea6ad6c5727d6a313 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 7 Jun 2024 17:10:47 -0700 Subject: [PATCH 2/3] test --- .../src/components/combobox/combobox.e2e.ts | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 552a8787e56..9b1765e199d 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -178,6 +178,35 @@ describe("calcite-combobox", () => { openClose(simpleComboboxHTML); }); + it("should open the combobox when typing within the input", async () => { + const page = await newE2EPage({ + html: html` + + + + + + + `, + }); + + const combobox = await page.find("calcite-combobox"); + const input = await page.find("calcite-combobox >>> input"); + const items = await page.findAll("calcite-combobox-item"); + expect(await combobox.getProperty("open")).toBe(false); + await input.focus(); + await page.waitForChanges(); + + await input.type("Arizona"); + await page.waitForChanges(); + + expect(await combobox.getProperty("open")).toBe(true); + expect(await items[0].isVisible()).toBe(true); + expect(await items[1].isVisible()).toBe(false); + expect(await items[2].isVisible()).toBe(false); + expect(await items[3].isVisible()).toBe(false); + }); + it("filtering does not match property with value of undefined", async () => { const page = await newE2EPage({ html: html` From 3b030b83714a6e21579ef5be497e8be91e0a3756 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 10 Jun 2024 13:52:30 -0700 Subject: [PATCH 3/3] review fixes --- .../src/components/combobox/combobox.e2e.ts | 95 ++++++++++--------- 1 file changed, 50 insertions(+), 45 deletions(-) diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts index 9b1765e199d..632cf66f4a3 100644 --- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts +++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts @@ -178,46 +178,49 @@ describe("calcite-combobox", () => { openClose(simpleComboboxHTML); }); - it("should open the combobox when typing within the input", async () => { - const page = await newE2EPage({ - html: html` - - - - - - - `, - }); + 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"); - const input = await page.find("calcite-combobox >>> input"); - const items = await page.findAll("calcite-combobox-item"); - expect(await combobox.getProperty("open")).toBe(false); - await input.focus(); + await combobox.callMethod("setFocus"); await page.waitForChanges(); + expect(await combobox.getProperty("open")).toBe(false); - await input.type("Arizona"); + const text = "Arizona"; + + await combobox.type(text); await page.waitForChanges(); expect(await combobox.getProperty("open")).toBe(true); - expect(await items[0].isVisible()).toBe(true); - expect(await items[1].isVisible()).toBe(false); - expect(await items[2].isVisible()).toBe(false); - expect(await items[3].isVisible()).toBe(false); + + 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"); @@ -235,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"); @@ -684,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");