[grid] Focus gets reused across pages

[juuso-vaadin]

Description

Focus within a cell is not cleared when Grid is being scrolled and vaadin-grid-cell-content elements are assigned with new data.

https://github.com/user-attachments/assets/a5a7f6b6-82bd-4f1d-a27f-b3f3bc77df00

Expected outcome

Focus should be cleared from cell contents when rows are initiated with new data. Focus could be moved to Grid's header or first cell without the visible focus ring.

Minimal reproducible example

https://vaadin.com/docs/latest/example?embed=grid-item-details-toggle-wc.js&import=component/grid/grid-item-details-toggle.ts,component/grid/react/grid-item-details-toggle.tsx

Steps to reproduce

1. Open Grid example that has button in cell
2. Focus one the buttons
3. Scroll the grid past the "page size" to see the focus appearing again

Environment

Vaadin version(s): V24 & V25, web component and Flow component

Browsers

Chrome, Firefox, Safari

[web-padawan]

This is essentially the same as #1953 - see https://github.com/vaadin/web-components/issues/1953#issuecomment-350982582.

[yuriy-fix]

@vursen, could you please check if it's the same issue you've addressed some time ago with https://github.com/vaadin/web-components/pull/7980?

[vursen]

I checked and that PR prevented focus from being reused only when the focus was directly on a cell or row element, which is only one case of the issue. As pointed out in the ticket, the focus can also be on an element inside the cell, which wasn't considered.

Moving focus somewhere temporarily while the focused row is out of the viewport sounds reasonable, but it needs more thinking since the grid may not have a header or footer. We already have an internal element #focusexit but moving focus to it would break the navigation sequence, since it comes after the footer and Tab would leave the grid, which doesn't sound logical. Maybe we could move focus to the #items element temporarily?