vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
443 stars 83 forks source link

Improve TreeGrid keyboard navigation #7385

Open TatuLund opened 4 months ago

TatuLund commented 4 months ago

Describe your motivation

The tactile feel of the TreeGrid keyboard navigation is very un-intuitive and poor. My own experience comes from creation of Tree add-on

https://vaadin.com/directory/component/tree

Which is basically just one column TreeGrid, and the shortcomings of the TreeGrid keyboard navigation becomes more pronounced in this case. E.g. space key toggles both the expand/collapse and selection. So there is a conflict. This is less severe in multi column case, as you can navigate out of hierarchy column, and handle selection by hitting space in other column.

You can use additional arrow left key press to go row navigation mode, after which you can toggle row selection by space, and it no longer toggles expand/collapse. However it is very easy mix between the modes by accidental additional arrow strokes and hence do un-intentional expand/collapse or select.

Furthermore I made TreeComboBox https://vaadin.com/directory/component/treecombobox Which otherwise works very nicely, but when using Tree in Popup that is part of the field, you would appreciate well working keyboard navigation.

Describe the solution you'd like

Clearer navigation where there is no overloading of the same keys for different things.

Describe alternatives you've considered

No response

Additional context

No response

TatuLund commented 1 month ago

The workaround is to extend vaadin-grid-tree-toggle and override the default keyboard navigation with our own:

Example:

https://github.com/TatuLund/tree-flow/blob/v24/src/main/resources/META-INF/resources/frontend/custom-grid-tree-toggle.js

And

https://github.com/TatuLund/tree-flow/blob/v24/src/main/java/org/vaadin/tatu/Tree.java#L130

In this version ENTER toggles the selection and SPACE toggles the expand/collapse