From ab09c71a242d501260e0fa339102f75f7eeb8cf0 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 10 Jun 2024 14:06:31 -0700
Subject: [PATCH] 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
---
 .../src/components/combobox/combobox.e2e.ts   | 84 +++++++++++++------
 .../src/components/combobox/combobox.tsx      |  1 +
 2 files changed, 60 insertions(+), 25 deletions(-)

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