fix(tree): allow deselection in single selectionMode (#9363)

**Related Issue:** #7900 ## Summary Made sure an item can be selected and deselected in single selection mode.
Esri · May 23, 2024 · cb6ef73 · cb6ef73
1 parent d294d1d
commit cb6ef73
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git 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
 
                   <calcite-tree slot="children">
-                    <calcite-tree-item id="${expandableItemChildId}">Grandchild 1</calcite-tree-item>
+                    <calcite-tree-item>Grandchild 1</calcite-tree-item>
 
                     <calcite-tree-item>Grandchild 2</calcite-tree-item>
 
-                    <calcite-tree-item>
+                    <calcite-tree-item id="${expandableItemChildId}">
                       Grandchild 3
                       <calcite-tree slot="children">
                         <calcite-tree-item>Great-Grandchild 1</calcite-tree-item>
@@ -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,14 +1308,45 @@ describe("calcite-tree", () => {
               selectionMode === "none"
                 ? 0
                 : !childToggleTraversesParent && selectionMode === "multiple"
-                  ? 1
-                  : canDeselect.child
+                  ? 0
+                  : canDeselect.child || selectionMode === "single" || selectionMode === "single-persist"
                     ? 0
                     : 1,
             );
           });
         },
       );
     }
+
+    it("selects/deselects in single selection", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-tree selection-mode="single">
+          <calcite-tree-item id="child1">Child 1</calcite-tree-item>
+          <calcite-tree-item id="sub1">
+            Child 2
+            <calcite-tree slot="children">
+              <calcite-tree-item id="gc1">Grandchild 1</calcite-tree-item>
+              <calcite-tree-item>Grandchild 2</calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+        </calcite-tree>
+      `);
+      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
@@ -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;
         }
       });
     }