From 4d345a2656a101c923309a492dbd49b53cd66ba6 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 8 Jan 2025 17:56:30 -0800
Subject: [PATCH] fix(autocomplete): fix icon property #11236

---
 .../autocomplete/autocomplete.e2e.ts          | 15 ++++++++++++
 .../autocomplete/autocomplete.stories.ts      | 15 ++++++++++++
 .../components/autocomplete/autocomplete.tsx  | 10 ++------
 .../src/components/autocomplete/resources.ts  |  4 ----
 .../calcite-components/src/utils/dom.spec.ts  | 24 ++++++++++++-------
 5 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts
index 389dcca6522..6a61026f270 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.e2e.ts
@@ -428,6 +428,21 @@ describe("calcite-autocomplete", () => {
     focusable("calcite-autocomplete");
   });
 
+  it("should be able to remove icon", async () => {
+    const page = await newE2EPage();
+    await page.setContent(simpleHTML);
+
+    const autocomplete = await page.find("calcite-autocomplete");
+    const input = await page.find("calcite-autocomplete >>> calcite-input");
+
+    expect(await input.getProperty("icon")).toBe(undefined);
+
+    autocomplete.setProperty("icon", false);
+    await page.waitForChanges();
+
+    expect(await input.getProperty("icon")).toBe(false);
+  });
+
   describe("keyboard navigation", () => {
     let page: E2EPage;
     beforeEach(async () => {
diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
index ffb05ad5dad..513c2f041dc 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
@@ -134,6 +134,21 @@ export const simple = (args: AutocompleteStoryArgs): string => html`
   </div>
 `;
 
+export const customIcon = (): string => html`
+  <div style="width:350px">
+    <calcite-autocomplete icon="banana"></calcite-autocomplete>
+  </div>
+`;
+
+export const noIcon = (): string => html`
+  <div style="width:350px">
+    <calcite-autocomplete id="autocomplete"></calcite-autocomplete>
+  </div>
+  <script>
+    document.getElementById("autocomplete").icon = false;
+  </script>
+`;
+
 export const matchResults = (): string =>
   html`<div style="width:350px; height: 600px;">
     <calcite-autocomplete label="Item list" id="myAutocomplete" input-value="item" open>
diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
index 3c9ded9afbe..e45bc1af785 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.tsx
@@ -60,7 +60,7 @@ import { Validation } from "../functional/Validation";
 import { createObserver } from "../../utils/observers";
 import { styles } from "./autocomplete.scss";
 import T9nStrings from "./assets/t9n/messages.en.json";
-import { CSS, ICONS, IDS, SLOTS } from "./resources";
+import { CSS, IDS, SLOTS } from "./resources";
 
 const groupItemSelector = "calcite-autocomplete-item-group";
 const itemSelector = "calcite-autocomplete-item";
@@ -654,12 +654,6 @@ export class Autocomplete
     this.updateGroups();
   }
 
-  private getIcon(): IconNameOrString {
-    const { icon } = this;
-
-    return icon === true ? ICONS.search : icon || ICONS.search;
-  }
-
   private setReferenceEl(el: Input["el"]): void {
     this.referenceEl = el;
 
@@ -804,7 +798,7 @@ export class Autocomplete
             disabled={disabled}
             enterKeyHint={enterKeyHint}
             form={this.form}
-            icon={this.getIcon()}
+            icon={this.icon}
             iconFlipRtl={this.iconFlipRtl}
             id={inputId}
             inputMode={inputMode}
diff --git a/packages/calcite-components/src/components/autocomplete/resources.ts b/packages/calcite-components/src/components/autocomplete/resources.ts
index 9500200e205..7fb20c5b668 100644
--- a/packages/calcite-components/src/components/autocomplete/resources.ts
+++ b/packages/calcite-components/src/components/autocomplete/resources.ts
@@ -3,10 +3,6 @@ export const SLOTS = {
   contentTop: "content-top",
 } as const;
 
-export const ICONS = {
-  search: "search",
-} as const;
-
 export const CSS = {
   inputContainer: "input-container",
   input: "input",
diff --git a/packages/calcite-components/src/utils/dom.spec.ts b/packages/calcite-components/src/utils/dom.spec.ts
index 79ade958c28..3f0abd225d6 100644
--- a/packages/calcite-components/src/utils/dom.spec.ts
+++ b/packages/calcite-components/src/utils/dom.spec.ts
@@ -58,15 +58,23 @@ describe("dom", () => {
   }
 
   describe("setRequestedIcon()", () => {
+    const iconObject = { exampleValue: "exampleReturnedValue" };
+    const matchedValue = "exampleValue";
+
     it("returns the custom icon name if custom value is passed", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "myCustomValue", "exampleValue")).toBe(
-        "myCustomValue",
-      ));
-
-    it("returns the pre-defined icon name if custom value is not passed", () =>
-      expect(setRequestedIcon({ exampleValue: "exampleReturnedValue" }, "", "exampleValue")).toBe(
-        "exampleReturnedValue",
-      ));
+      expect(setRequestedIcon(iconObject, "myCustomValue", matchedValue)).toBe("myCustomValue"));
+
+    it("returns the pre-defined icon name if custom value is true", () =>
+      expect(setRequestedIcon(iconObject, true, matchedValue)).toBe(iconObject[matchedValue]));
+
+    it("returns the pre-defined icon name if is an empty string", () =>
+      expect(setRequestedIcon(iconObject, "", matchedValue)).toBe(iconObject[matchedValue]));
+
+    it("returns undefined if custom value is undefined", () =>
+      expect(setRequestedIcon(iconObject, undefined, matchedValue)).toBe(undefined));
+
+    it("returns undefined if custom value is false", () =>
+      expect(setRequestedIcon(iconObject, false, matchedValue)).toBe(undefined));
   });
 
   describe("uniqueId", () => {