fix(combobox): open the component when typing within it (#9543)

**Related Issue:** #9401 ## Summary - Toggles the combobox's open property when typing within the input - If the value.length > 0, the combobox is opened otherwise its closed - adds test
Esri · Jun 10, 2024 · ab09c71 · ab09c71
1 parent bc2c2c6
commit ab09c71
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 25 deletions.
diff --git 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`
+      <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 = "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`
-        <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 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");
     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`
-        <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 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");
     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: `<calcite-combobox>
-        <calcite-combobox-item value="one" selected text-label="one"></calcite-combobox-item>
-      </calcite-combobox>`,
-      });
+      const page = await newE2EPage();
+
+      await page.setContent(
+        html`<calcite-combobox>
+          <calcite-combobox-item value="one" selected text-label="one"></calcite-combobox-item>
+        </calcite-combobox>`,
+      );
 
       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
@@ -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;
     }