From da048f618a987801d8ab5c284ab0f8c549e70a16 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 21 Jun 2023 10:47:56 -0700
Subject: [PATCH] fix(list): update selectedItems property on all item
 selection changes (#7204)

**Related Issue:** #7202

## Summary

- Updates `selectedItems` when an item's selection is toggled.
- Fixes current logic which depends on value being `true`.
- Adds test coverage
---
 .../src/components/list-item/list-item.tsx           |  6 ++----
 .../src/components/list/list.e2e.ts                  | 12 ++++++++++++
 .../calcite-components/src/components/list/list.tsx  |  8 +++-----
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx
index 8a88d94b3e3..2a640e48c65 100644
--- a/packages/calcite-components/src/components/list-item/list-item.tsx
+++ b/packages/calcite-components/src/components/list-item/list-item.tsx
@@ -131,10 +131,8 @@ export class ListItem
   @Prop({ reflect: true, mutable: true }) selected = false;
 
   @Watch("selected")
-  handleSelectedChange(value: boolean): void {
-    if (value) {
-      this.calciteInternalListItemSelect.emit();
-    }
+  handleSelectedChange(): void {
+    this.calciteInternalListItemSelect.emit();
   }
 
   /**
diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts
index 5d4a14b541a..c05574f4285 100755
--- a/packages/calcite-components/src/components/list/list.e2e.ts
+++ b/packages/calcite-components/src/components/list/list.e2e.ts
@@ -328,5 +328,17 @@ describe("calcite-list", () => {
     await calciteListChangeEvent2;
     expect(await listItemOne.getProperty("selected")).toBe(false);
     expect(await list.getProperty("selectedItems")).toHaveLength(0);
+
+    listItemOne.setProperty("selected", true);
+    await page.waitForChanges();
+    await page.waitForTimeout(listDebounceTimeout);
+    expect(await listItemOne.getProperty("selected")).toBe(true);
+    expect(await list.getProperty("selectedItems")).toHaveLength(1);
+
+    listItemOne.setProperty("selected", false);
+    await page.waitForChanges();
+    await page.waitForTimeout(listDebounceTimeout);
+    expect(await listItemOne.getProperty("selected")).toBe(false);
+    expect(await list.getProperty("selectedItems")).toHaveLength(0);
   });
 });
diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx
index fca1e5dae50..41cc08d8a40 100755
--- a/packages/calcite-components/src/components/list/list.tsx
+++ b/packages/calcite-components/src/components/list/list.tsx
@@ -185,11 +185,9 @@ export class List implements InteractiveComponent, LoadableComponent {
     const target = event.target as HTMLCalciteListItemElement;
     const { listItems, selectionMode } = this;
 
-    listItems.forEach((listItem) => {
-      if (selectionMode === "single" || selectionMode === "single-persist") {
-        listItem.selected = listItem === target;
-      }
-    });
+    if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
+      listItems.forEach((listItem) => (listItem.selected = listItem === target));
+    }
 
     this.updateSelectedItems();
   }