diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx index 1c7e2fa8753..c5284322ef8 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.tsx +++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx @@ -201,7 +201,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent render(): VNode { const rtl = getElementDir(this.el) === "rtl"; - const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children"; + const showBulletPoint = + this.selectionMode === "single" || + this.selectionMode === "children" || + this.selectionMode === "single-persist"; const showCheckmark = this.selectionMode === "multiple" || this.selectionMode === "multichildren"; const showBlank = this.selectionMode === "none" && !this.hasChildren; diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts index 6d90c958c5b..d35e260ee06 100644 --- a/packages/calcite-components/src/components/tree/tree.e2e.ts +++ b/packages/calcite-components/src/components/tree/tree.e2e.ts @@ -1348,5 +1348,36 @@ describe("calcite-tree", () => { await directItemClick(page, gc1); expect(await tree.getProperty("selectedItems")).toHaveLength(0); }); + + it("single-persist allows only one 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(1); + const sub1 = await page.find("#sub1"); + await directItemClick(page, sub1); + expect(await tree.getProperty("selectedItems")).toHaveLength(1); + 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(1); + }); }); }); diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts index 9c68f9e4cea..487bf5842f0 100644 --- a/packages/calcite-components/src/components/tree/tree.stories.ts +++ b/packages/calcite-components/src/components/tree/tree.stories.ts @@ -161,7 +161,7 @@ export default { }, }; -const selectionModes = ["single", "children", "multichildren", "ancestors", "none", "multiple"]; +const selectionModes = ["single", "single-persist", "children", "multichildren", "ancestors", "none", "multiple"]; export const simple = (): string => html` Tree + +
+
single persist select
+ +
+ + Child 1 + + + Child 2 + + + Grandchild 1 + + Grandchild 2 + + + Grandchild 3 + + Great-Grandchild 1 + Great-Grandchild 2 + Great-Grandchild 3 + + + + + +
+ +
+ + Child 1 + + + Child 2 + + + Grandchild 1 + + Grandchild 2 + + + Grandchild 3 + + Great-Grandchild 1 + Great-Grandchild 2 + Great-Grandchild 3 + + + + + +
+
+
multiple select