Grid focus navigation issue when mixing mouse and keyboard navigation

[sissbruecker]

Description

The keyboard navigation in the grid has an issue where clicking with the mouse after using keyboard navigation does not update the internal state left by the keyboard navigation. Mixing both, after clicking and using the arrow keys, the focus jumps back to the column where the last keyboard navigation happened.

Steps to reproduce

1. Start the example project below, or try the master-detail view in start.vaadin.com, or go to the grid examples in the docs
2. Click on cell [0,0] (first row, first column)
3. Press down arrow key
4. Click on cell [0,2] (first row, third column)
5. Press down arrow key

Expected outcome

The cell [1,2] (second row, third column) is focused

Actual outcome

The cell [1,0] (second row, first column) is focused

Live Demo (optional)

screen-recorder-fri-jun-18-2021-09-26-10.mp4

Minimal reproducible example

This is currently reproducible with all Vaadin versions supported by start.vaadin.com, in the master-detail example.

Here is a snapshot of a start.vaadin.com project:
grid-cell-navigation-issue.zip

Environment

• Vaadin V14, V20, V21 pre
• MacOS 11.2.3

Browsers Affected

• Chrome 91
• Firefox 88
• Safari 14

[jcgueriaud1]

As a workaround you can do this:

	grid.addItemClickListener(event -> {
		grid.getElement().executeJs(
			"delete $0._focusedColumnOrder;",
			grid.getElement());
	});