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.
This commit is contained in:
Stephen Sugden
2023-08-18 15:55:29 +02:00
committed by GitHub
parent 4ee5271a83
commit fad76dd1a2

View File

@@ -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);