From fad76dd1a296aab62a9ba2ce9bf582fd2d9193e3 Mon Sep 17 00:00:00 2001
From: Stephen Sugden <grncdr@users.noreply.github.com>
Date: Fri, 18 Aug 2023 15:55:29 +0200
Subject: [PATCH] SlTree: separate expand/collapse and selection behaviour in
 'single' mode (#1521)

* Never select tree items when clicking the chevron

This changes the behaviour of sl-tree so that clicking on the expand/collapse icon will not select/deselect the item, only toggle it's expanded state.

* Refactor: inline SlTree.syncTreeItems

This was only called from 2 places, and they each had different
behaviour anyways.

* SlTree: separate expand/collapse from selection

This makes 'multi' and 'single' mode consistent with each other, and
with native file managers.
---
 src/components/tree/tree.component.ts | 26 ++++++--------------------
 1 file changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/components/tree/tree.component.ts b/src/components/tree/tree.component.ts
index 65a41f38a..9f083a3a1 100644
--- a/src/components/tree/tree.component.ts
+++ b/src/components/tree/tree.component.ts
@@ -168,20 +168,6 @@ export default class SlTree extends ShoelaceElement {
     }
   };
 
-  private syncTreeItems(selectedItem: SlTreeItem) {
-    const items = this.getAllTreeItems();
-
-    if (this.selection === 'multiple') {
-      syncCheckboxes(selectedItem);
-    } else {
-      for (const item of items) {
-        if (item !== selectedItem) {
-          item.selected = false;
-        }
-      }
-    }
-  }
-
   private selectItem(selectedItem: SlTreeItem) {
     const previousSelection = [...this.selectedItems];
 
@@ -190,12 +176,12 @@ export default class SlTree extends ShoelaceElement {
       if (selectedItem.lazy) {
         selectedItem.expanded = true;
       }
-      this.syncTreeItems(selectedItem);
+      syncCheckboxes(selectedItem);
     } else if (this.selection === 'single' || selectedItem.isLeaf) {
-      selectedItem.expanded = !selectedItem.expanded;
-      selectedItem.selected = true;
-
-      this.syncTreeItems(selectedItem);
+      const items = this.getAllTreeItems();
+      for (const item of items) {
+        item.selected = (item === selectedItem);
+      }
     } else if (this.selection === 'leaf') {
       selectedItem.expanded = !selectedItem.expanded;
     }
@@ -311,7 +297,7 @@ export default class SlTree extends ShoelaceElement {
       return;
     }
 
-    if (this.selection === 'multiple' && isExpandButton) {
+    if (isExpandButton) {
       treeItem.expanded = !treeItem.expanded;
     } else {
       this.selectItem(treeItem);