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