fix(combobox): selection-mode="single-persist" correctly selects an i…

…tem when items have same values (#10366)

**Related Issue:** #8720

## Summary

- add fix for selecting items with the same value
- add e2e test

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`

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;
     }