fix(combobox): use heading as fallback for UI labels (#10879)

**Related Issue:** #10321 ## Summary Follow-up from #10855.
Esri · Nov 26, 2024 · 2a1d844 · 2a1d844
1 parent 727530c
commit 2a1d844
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -1106,7 +1106,7 @@ describe("calcite-combobox", () => {
       await page.waitForChanges();
 
       const item = await page.find("calcite-combobox-item:first-child");
-      expect(await item.getProperty("textLabel")).toBe("K");
+      expect(await item.getProperty("heading")).toBe("K");
 
       const combobox = await page.find("calcite-combobox");
 
@@ -1135,7 +1135,7 @@ describe("calcite-combobox", () => {
       const customValue = await page.find("calcite-combobox-item:first-child");
       const item1 = await page.find("calcite-combobox-item#one");
 
-      expect(await customValue.getProperty("textLabel")).toBe("K");
+      expect(await customValue.getProperty("heading")).toBe("K");
 
       expect((await combobox.getProperty("selectedItems")).length).toBe(1);
       expect(await customValue.getProperty("selected")).toBe(true);

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1299,7 +1299,7 @@ export class Combobox
   }
 
   private addCustomChip(value: string, focus?: boolean): void {
-    const existingItem = this.items.find((el) => el.textLabel === value);
+    const existingItem = this.items.find((el) => (el.heading || el.textLabel) === value);
     if (existingItem) {
       this.toggleSelection(existingItem, true);
     } else {
@@ -1311,7 +1311,7 @@ export class Combobox
         "calcite-combobox-item",
       );
       item.value = value;
-      item.textLabel = value;
+      item.heading = value;
       item.selected = true;
       this.el.prepend(item);
       this.resetText();
@@ -1676,7 +1676,7 @@ export class Combobox
         role="option"
         tabIndex="-1"
       >
-        {item.textLabel}
+        {item.heading || item.textLabel}
       </li>
     ));
   }

diff --git a/packages/calcite-components/src/components/combobox/utils.ts b/packages/calcite-components/src/components/combobox/utils.ts
@@ -45,5 +45,5 @@ export function isSingleLike(selectionMode: Combobox["selectionMode"]): boolean
 }
 
 export function getLabel(item: ComboboxItem["el"]): string {
-  return item.shortHeading || item.textLabel;
+  return item.shortHeading || item.heading || item.textLabel;
 }