fix(combobox): clears input value on blur (#7721)

**Related Issue:** #2162 ## Summary Clears the user entered input on `blur` when `allowCustomValues` is set to `false`
Esri · Sep 12, 2023 · e04cc4e · e04cc4e
1 parent 6b63e0e
commit e04cc4e
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 9 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -1087,6 +1087,31 @@ describe("calcite-combobox", () => {
       expect(eventSpy).toHaveReceivedEventTimes(2);
     });
 
+    it("should clear the input on blur when filtered items are empty", async () => {
+      await page.waitForChanges();
+      const combobox = await page.find("calcite-combobox");
+      const inputEl = await page.find(`#myCombobox >>> input`);
+
+      await inputEl.focus();
+      await page.waitForChanges();
+      expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
+      await page.keyboard.type("asdf");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(await combobox.getProperty("value")).toBe("");
+
+      combobox.setProperty("selectionMode", "single");
+      await inputEl.focus();
+      await page.waitForChanges();
+      expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
+      await page.keyboard.type("asdf");
+      await page.waitForChanges();
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      expect(await combobox.getProperty("value")).toBe("");
+    });
+
     describe("keyboard interaction with chips", () => {
       let element;
       let chips;
@@ -1810,4 +1835,64 @@ describe("calcite-combobox", () => {
       expect(await item.getProperty("scale")).toBe("l");
     });
   });
+
+  describe("clicked outside", () => {
+    let page: E2EPage;
+
+    beforeEach(async () => {
+      page = await newE2EPage();
+      await page.setContent(
+        html`
+          <calcite-combobox id="myCombobox">
+            <calcite-combobox-item id="one" value="one" label="one"></calcite-combobox-item>
+            <calcite-combobox-item id="two" value="two" label="two"></calcite-combobox-item>
+          </calcite-combobox>
+          <calcite-button id="button">click me</calcite-button>
+        `
+      );
+    });
+
+    async function assertClickOutside(selectionMode = "multiple", allowCustomValues = false): Promise<void> {
+      const combobox = await page.find("calcite-combobox");
+      combobox.setProperty("selectionMode", selectionMode);
+      combobox.setProperty("allowCustomValues", allowCustomValues);
+      const inputEl = await page.find(`#myCombobox >>> input`);
+      const buttonEl = await page.find("calcite-button");
+
+      await inputEl.focus();
+      await page.waitForChanges();
+      expect(await page.evaluate(() => document.activeElement.id)).toBe("myCombobox");
+      await inputEl.type("asdf");
+      await page.waitForChanges();
+
+      if (allowCustomValues) {
+        await inputEl.press("Enter");
+        await buttonEl.click();
+        await page.waitForChanges();
+        expect(await page.evaluate(() => document.activeElement.id)).toBe("button");
+        expect(await combobox.getProperty("value")).toBe("asdf");
+      } else {
+        await buttonEl.click();
+        await page.waitForChanges();
+        expect(await page.evaluate(() => document.activeElement.id)).toBe("button");
+        expect(await combobox.getProperty("value")).toBe("");
+      }
+    }
+
+    it("should clear input value in single selectionMode", async () => {
+      await assertClickOutside("single");
+    });
+
+    it("should not clear input value in single selectionMode with allowCustomValues", async () => {
+      await assertClickOutside("single", true);
+    });
+
+    it("should clear input value in multiple selectionMode", async () => {
+      await assertClickOutside();
+    });
+
+    it("should not clear input value in multiple selectionMode with allowCustomValues", async () => {
+      await assertClickOutside("multiple", true);
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -535,6 +535,11 @@ export class Combobox
     this.setFocus();
   }
 
+  private clearInputValue(): void {
+    this.textInput.value = "";
+    this.text = "";
+  }
+
   setFilteredPlacements = (): void => {
     const { el, flipPlacements } = this;
 
@@ -759,6 +764,12 @@ export class Combobox
   setInactiveIfNotContained = (event: Event): void => {
     const composedPath = event.composedPath();
 
+    if (!this.allowCustomValues && this.textInput.value) {
+      this.clearInputValue();
+      this.filterItems("");
+      this.updateActiveItemIndex(-1);
+    }
+
     if (!this.open || composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
       return;
     }
@@ -767,15 +778,6 @@ export class Combobox
       this.addCustomChip(this.text);
     }
 
-    if (isSingleLike(this.selectionMode)) {
-      if (this.textInput) {
-        this.textInput.value = "";
-      }
-      this.text = "";
-      this.filterItems("");
-      this.updateActiveItemIndex(-1);
-    }
-
     this.open = false;
   };