[TreeView] Cannot select parent nodes using keyboard ENTER key

[garyb1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Visit CodeSandbox or MUI Docs
2. Navigate Tree View component uses arrow keys
3. Press Enter or Space key to activate

Current behavior 😯

The ENTER key will expand or collapse the tree but it will not select the parent node.

The SPACE key will select the parent item.

Expected behavior 🤔

I would like to select a parent node using the ENTER key.

Context 🔦

On the APG Tree View Design Pattern

Enter Key: activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.

I want to use enter to activate all items on my navigation tree if possible. I have a tried a few different approaches with the custom component but I am having no luck

Your environment 🌎

"@mui/icons-material": "^5.10.3", "@mui/lab": "^5.0.0-alpha.98", "@mui/material": "5.10.3", "@mui/styles": "5.10.3", "react": "18.2.0"

User agent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Google Chrome | 105.0.5195.125 (Official Build) (x86_64)

Benchmark

• https://react-arborist.netlify.app/cities

[mnajdova]

Enter: activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.

This describes exactly what is implemented currently. Enter opens/closes, and Space toggles the open/closed space as defined:

Space: Toggles the selection state of the focused node.

[garyb1]

@mnajdova Thanks for your response.

But why not allow the selection of the parent node on enter? Doesn't the design pattern for TreeView suggest that space should toggle selection only for multi-select trees?

Would that not cause confusion to users because they may interact with ENTER or SPACE only on the non-parent nodes, but if they want to select a parent-node it has to be SPACE only?

Selection in multi-select trees:

Space: Toggles the selection state of the focused node.

My use case is not a multi-select tree. This is also the case in the APG Tree View Example - allowing space or enter.

[srideviabhirami]

Are we expecting to expand/collapse the parent node for space and select/unselect for enter key ?

[mnajdova]

I apologize but I still don't understand why the proposed is better than what we have now. We have two actions possible on parent nodes: expand & select. We kave a different key for each of them, and we are following the guide from ARIA:

Enter: For parent nodes, one possible default action is to open or close the node.

It doesn't matter if it is a single or multi select.

[garyb1]

Hey @mnajdova,

We have two actions possible on parent nodes: expand & select

But isn't it inconsistent with the interaction with an end node? For a parent node you can press enter to expand it, and you press space to select it. But an end node can be selected with both enter or space?

In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.

By the way I think this is a duplicate of Issue 30758 which was supposedly fixed in PR 30795 ... However the issue still occurs for me.

[amhci]

I'd like to +1 this thread. I fully agree with @garyb1 on this. I posted my situation in the Discord channel for treeview and was referred to this existing thread. Here's what I wrote:

I am using the ContentComponent prop to separate expansion and selection/activation; with an e-reader, my parent nodes are not just containers, they are TOC entries so you don't want to trigger collapse/expand when you activate these nodes to navigate to them. An issue I have is that for these nodes, the enter key activates collapse/expand and you have to use space to select (ie, navigate to this node in the book). The full-time SR user I am working with found this confusing and expected enter to open the node in the book he was focused on. The ARIA APG states "Enter: activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node." -- the latter is us; our tree is single-select (selection indicates where in the book you are) and select is separate from focus. Is there an easy way to get enter to trigger selection?

In my use case, the TreeView nodes function as links, and selection is a sort of byproduct of following that link that keeps track of your progress in the book. Daily SR users generally expect enter will follow a link.

[scardamalias]

Agree with @andylogictran and @garyb1 on this.

@mnajdova your citation of the spec is followed by a sentence which, in my reading, is very clear that it does matter whether it's a single- or multi-select:

Enter: activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node. (emphasis added)

The behavior requested in this issue aligns with the W3C TreeView Pattern examples (ENTER and SPACE both trigger selection): https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1a/ (file directory) and https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/ (navigation)

Thanks for considering!

[khokm]

Suggestion: add returnKeyAction: "expand" | "select" prop to SimpleTreeView API so it doesn't break anything.