From 5401ea68116efc8b982e37729777bbb3674ad8f3 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 25 Sep 2024 12:17:47 -0700
Subject: [PATCH] fix(combobox): selection-mode="single-persist" correctly
 selects an item when items have same values (#10366)

**Related Issue:** #8720

## Summary

- add fix for selecting items with the same value
- add e2e test
---
 .../src/components/combobox/combobox.e2e.ts   | 37 +++++++++++++++++++
 .../src/components/combobox/combobox.tsx      | 10 +++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
index eec01ad1e14..df30e2bd620 100644
--- a/packages/calcite-components/src/components/combobox/combobox.e2e.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -747,6 +747,43 @@ describe("calcite-combobox", () => {
           expect(await combobox.getProperty("open")).toBe(true);
         });
 
+        it("single-persist-selection mode correctly selects different items with the same value", async () => {
+          const page = await newE2EPage();
+          await page.setContent(html`
+            <calcite-combobox selection-mode="single-persist">
+              <calcite-combobox-item value="one" heading="one"></calcite-combobox-item>
+              <calcite-combobox-item value="one" heading="two"></calcite-combobox-item>
+            </calcite-combobox>
+          `);
+
+          const combobox = await page.find("calcite-combobox");
+
+          const firstOpenEvent = page.waitForEvent("calciteComboboxOpen");
+          await combobox.click();
+          await firstOpenEvent;
+
+          const item1 = await combobox.find("calcite-combobox-item[heading=one]");
+          const item2 = await combobox.find("calcite-combobox-item[heading=two]");
+
+          await item1.click();
+          await page.waitForChanges();
+          expect(await combobox.getProperty("value")).toBe("one");
+          expect(await item1.getProperty("selected")).toBe(true);
+          expect(await item2.getProperty("selected")).toBe(false);
+          expect(await combobox.getProperty("open")).toBe(false);
+
+          const secondOpenEvent = page.waitForEvent("calciteComboboxOpen");
+          await combobox.click();
+          await secondOpenEvent;
+
+          await item2.click();
+          await page.waitForChanges();
+          expect(await combobox.getProperty("value")).toBe("one");
+          expect(await item1.getProperty("selected")).toBe(false);
+          expect(await item2.getProperty("selected")).toBe(true);
+          expect(await combobox.getProperty("open")).toBe(false);
+        });
+
         it("multiple-selection mode allows toggling selection once the selected item is selected", async () => {
           const page = await newE2EPage();
           await page.setContent(html`
diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
index 0dc62ec5656..5d585c20731 100644
--- a/packages/calcite-components/src/components/combobox/combobox.tsx
+++ b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -776,7 +776,8 @@ export class Combobox
         break;
       case "Enter":
         if (this.open && this.activeItemIndex > -1) {
-          this.toggleSelection(this.filteredItems[this.activeItemIndex]);
+          const item = this.filteredItems[this.activeItemIndex];
+          this.toggleSelection(item, !item.selected);
           event.preventDefault();
         } else if (this.activeChipIndex > -1) {
           this.removeActiveChip();
@@ -1132,10 +1133,13 @@ export class Combobox
 
   private emitComboboxChange = debounce(this.internalComboboxChangeEvent, 0);
 
-  toggleSelection(item: HTMLCalciteComboboxItemElement, value = !item.selected): void {
+  toggleSelection(item: HTMLCalciteComboboxItemElement, value: boolean): void {
     if (
       !item ||
-      (this.selectionMode === "single-persist" && item.selected && item.value === this.value)
+      (this.selectionMode === "single-persist" &&
+        item.selected &&
+        item.value === this.value &&
+        !value)
     ) {
       return;
     }