Skip to content

Commit da048f6

Browse files
authored
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
1 parent 47620ba commit da048f6

File tree

3 files changed

+17
-9
lines changed

3 files changed

+17
-9
lines changed

packages/calcite-components/src/components/list-item/list-item.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,10 +131,8 @@ export class ListItem
131131
@Prop({ reflect: true, mutable: true }) selected = false;
132132

133133
@Watch("selected")
134-
handleSelectedChange(value: boolean): void {
135-
if (value) {
136-
this.calciteInternalListItemSelect.emit();
137-
}
134+
handleSelectedChange(): void {
135+
this.calciteInternalListItemSelect.emit();
138136
}
139137

140138
/**

packages/calcite-components/src/components/list/list.e2e.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -328,5 +328,17 @@ describe("calcite-list", () => {
328328
await calciteListChangeEvent2;
329329
expect(await listItemOne.getProperty("selected")).toBe(false);
330330
expect(await list.getProperty("selectedItems")).toHaveLength(0);
331+
332+
listItemOne.setProperty("selected", true);
333+
await page.waitForChanges();
334+
await page.waitForTimeout(listDebounceTimeout);
335+
expect(await listItemOne.getProperty("selected")).toBe(true);
336+
expect(await list.getProperty("selectedItems")).toHaveLength(1);
337+
338+
listItemOne.setProperty("selected", false);
339+
await page.waitForChanges();
340+
await page.waitForTimeout(listDebounceTimeout);
341+
expect(await listItemOne.getProperty("selected")).toBe(false);
342+
expect(await list.getProperty("selectedItems")).toHaveLength(0);
331343
});
332344
});

packages/calcite-components/src/components/list/list.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -185,11 +185,9 @@ export class List implements InteractiveComponent, LoadableComponent {
185185
const target = event.target as HTMLCalciteListItemElement;
186186
const { listItems, selectionMode } = this;
187187

188-
listItems.forEach((listItem) => {
189-
if (selectionMode === "single" || selectionMode === "single-persist") {
190-
listItem.selected = listItem === target;
191-
}
192-
});
188+
if (target.selected && (selectionMode === "single" || selectionMode === "single-persist")) {
189+
listItems.forEach((listItem) => (listItem.selected = listItem === target));
190+
}
193191

194192
this.updateSelectedItems();
195193
}

0 commit comments

Comments
 (0)