How can I select a tree item without causing it to expand or collapse?

[Bananas-Are-Yellow]

Imagine writing a file manager where the folder structure is shown in the left pane and the files in the current folder are shown in the right pane. I want to expand a parent folder to see the child folders, but I also want to be able to select the parent folder to see its files. The problem is that if I select the parent tree item it will collapse the sub-tree. Is there a way for the tree item to only expand or collapse when clicking on the symbol on the left and not when clicking on the text?

[claviska]

I don't believe this is currently possible without hooking into click and/or mousedown events.

Maybe @alenaksu has an idea, though.

[alenaksu]

Unfortunately I don't think it's possible with the current implementation and I'm afraid that even using a listener wouldn't help.

[michaeltlombardi]

I just ran into this for a list of links, where selecting a link in the tree caused it to collapse/expand the node. It's not the worst thing for my current use case, but being able to indicate that I selected a child element of the tree item rather than the tree item itself would be beneficial.

Another example use-case would be a tree of an object's properties with icon buttons to click for more info.

[grncdr]

Also struggling with this. Seems like the code responsible is in the SlTree.selectItem method here:

shoelace/src/components/tree/tree.component.ts

Lines 188 to 201 in e298f7e

	if (this.selection === 'multiple') {
	selectedItem.selected = !selectedItem.selected;
	if (selectedItem.lazy) {
	selectedItem.expanded = true;
	}
	this.syncTreeItems(selectedItem);
	} else if (this.selection === 'single' || selectedItem.isLeaf) {
	selectedItem.expanded = !selectedItem.expanded;
	selectedItem.selected = true;
	this.syncTreeItems(selectedItem);
	} else if (this.selection === 'leaf') {
	selectedItem.expanded = !selectedItem.expanded;
	}

That explains the comment from @alenaksu about "even using a listener wouldn't help" since there is no event dispatched until after the expanded property has already been changed, which happens in handleExpandAnimation here:

shoelace/src/components/tree-item/tree-item.component.ts

Lines 193 to 194 in e298f7e

	@watch('expanded', { waitUntilFirstUpdate: true })
	handleExpandAnimation() {

---

It seems like the crux of the issue is that select & expand/collapse are both handled by the same gesture. This issue primarily affects the 'single' selection mode; in the 'leaf' selection mode, the nodes that are collapsible are disjoint from those that are selectable, and in 'multiple' selection mode, the expand/collapse behaviour is handled only through the icon elements.

I see three possible approaches to improving the 'single' mode:

1. Behave like 'multi' mode and only collapse/expand nodes via the icons.
2. Adjust the expand/collapse behaviour of selectItem to behave more "intuitively" (I know that's a loaded word...).
3. Rewrite a fair bit of SlTree and SlTreeItem to dispatch cancellable events from user interaction before modifying the element properties/appearance. This would allow Shoelace consumers to to have precise control over the behaviour of trees and their items.

---

For option 2, I've opened a PR here: #1517

I may try to create an alternate PR for option 1 as well, but option 3 is more than I have the appetite for at the moment.