diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts index a6568591554..6d90c958c5b 100644 --- a/packages/calcite-components/src/components/tree/tree.e2e.ts +++ b/packages/calcite-components/src/components/tree/tree.e2e.ts @@ -1231,11 +1231,11 @@ describe("calcite-tree", () => { Child 2 - Grandchild 1 + Grandchild 1 Grandchild 2 - + Grandchild 3 Great-Grandchild 1 @@ -1292,10 +1292,11 @@ describe("calcite-tree", () => { ? 0 : selectionMode === "ancestors" && !childToggleTraversesParent ? 7 - : !childToggleTraversesParent && - (selectionMode === "multiple" || selectionMode === "single" || selectionMode === "single-persist") + : selectionMode === "multiple" || selectionMode === "single" || selectionMode === "single-persist" ? 0 - : 1, + : selectionMode === "children" || selectionMode === "multichildren" + ? 1 + : 4, ); await selectItemChild(page, expandableChildItem); @@ -1307,8 +1308,8 @@ describe("calcite-tree", () => { selectionMode === "none" ? 0 : !childToggleTraversesParent && selectionMode === "multiple" - ? 1 - : canDeselect.child + ? 0 + : canDeselect.child || selectionMode === "single" || selectionMode === "single-persist" ? 0 : 1, ); @@ -1316,5 +1317,36 @@ describe("calcite-tree", () => { }, ); } + + it("selects/deselects in single selection", async () => { + const page = await newE2EPage(); + await page.setContent(html` + + Child 1 + + Child 2 + + Grandchild 1 + Grandchild 2 + + + + `); + const tree = await page.find("calcite-tree"); + expect(await tree.getProperty("selectedItems")).toHaveLength(0); + const child1 = await page.find("#child1"); + await directItemClick(page, child1); + expect(await tree.getProperty("selectedItems")).toHaveLength(1); + await directItemClick(page, child1); + expect(await tree.getProperty("selectedItems")).toHaveLength(0); + const sub1 = await page.find("#sub1"); + await directItemClick(page, sub1); + expect(await tree.getProperty("selectedItems")).toHaveLength(0); + const gc1 = await page.find("#gc1"); + await directItemClick(page, gc1); + expect(await tree.getProperty("selectedItems")).toHaveLength(1); + await directItemClick(page, gc1); + expect(await tree.getProperty("selectedItems")).toHaveLength(0); + }); }); }); diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx index a07359080c9..29d7773aeaa 100644 --- a/packages/calcite-components/src/components/tree/tree.tsx +++ b/packages/calcite-components/src/components/tree/tree.tsx @@ -228,7 +228,7 @@ export class Tree { } else if (!isNoneSelectionMode) { targetItems.forEach((treeItem) => { if (!treeItem.disabled) { - treeItem.selected = true; + treeItem.selected = this.selectionMode !== "single" || !treeItem.selected; } }); }