I’ve got a Grid with SingleSelection - Mode activated. I can navigate through the grid-rows with Arrow-Keys up and down.
If I switch the SelectionMode to Multi and select some of the entries with the checkbox in the first column, and then trying to navigate with the arrow-keys, the whole grid scrolls although the selected row is in the middle of the grid / screen.
I didn’t find any switch to toggle this feature off.
I only would like the grid to scroll, when my manual selection reaches the border of the visible area.
Does anybody have similar experiences with the Grid in Vaadin 14?
thanks for the answer. In the Grid demos linked by you the behaviour can be reproduced in Google Chrome (Version 81.0.4044.129 (Offizieller Build) (64-Bit)) as well as in Firefox (75.0 (64-Bit)) unter MacOS 10.15.4.
To reproduce, please follow these steps:
Click on one row at the “Grid Multi Selection” and navigate with the arrow-down-key => everything is alright, the cell in the next row will be selected
then click at the checkbox in the first column and after that try to navigate with the arrow-down-key as done before, without clicking into the grid again => now the grid scrolls when hitting the arrow-down and arrow-up-key
I think this is because when clicking into the checkbox, the focus is no longer on the cell but at the grid itself.
When I hit the tab key after click into the checkbox, my grid has the focus again and I can navigate with the arrow-down / arrow - up-key through the cells.
I think I will try to manually reset the focus on the grid-cell, or do you have a better strategy?
Maik, thanks for the clarification. Now I see how it happens and can reproduce it myself too.
The issue seems to be that when you click the checkbox with the mouse, the checkbox component itself receives focus and in that case using arrow keys scrolls the scrollable area of the grid directly instead of navigating the cells. This only happens with the combination of mouse + keyboard.
If you only navigate the grid with the keyboard, you can also navigate to the checkbox cell with the arrow keys and check/uncheck it with the spacebar key, but in that case the focus is on the whole cell that contains the checkbox (not in the checkbox itself).