Navigating in Grid with Arrow-Keys scrolls when in MultiSelectionMode


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 so far.
Kind regards,

I tried to use keyboard navigation in the [Grid demos]
( (both single select and multi select) but they seem to work correctly (same behaviour on both).

Can you share more details about your situation when it breaks?

  • What exact version of Vaadin are you using (latest stable V14 is currently 14.1.27)?
  • In what browser you have the problem? Does it happen with other browsers too?
  • Can you share a code snippet or project that reproduces the issue for you?

Hi Kari,

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?

Kind regards,

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).

This seems to be a minor UX bug in the vaadin-grid. I opened a new issue about it here:

Hi Kari,
thanks for the response and the ticket.
I will follow the ticket from now on.

Kind regards,