fix(autocomplete): fix icon property #11236

Esri · Jan 9, 2025 · 4d345a2 · 4d345a2
1 parent 2911675
commit 4d345a2
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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", () => {