vursen
commented
1 week ago The issue is only observable in the mentioned "Cell Focus" docs example and doesn't occur with a plain grid. The recurrence is connected to a custom stylesheet that comes with that docs example:
vaadin-grid.force-focus-outline::part(focused-cell)::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
}This CSS seems to be there to enforce the focus outline when a cell is clicked, not just when it's focused with the keyboard. However, mouse interactions don't trigger the navigating attribute, so this case falls outside the default grid logic that prevents recurrence when scrolling after keyboard navigation (and could also help prevent it in the docs example with some CSS tweaks if the attribute was added):
Description
We are using the Vaadin Grid with focusable cells. In tables with a lot of entries, we have noticed that if you start scrolling after focussing a cell, a focussed cell appears again and again, even though the actual focussed cell is not in the visible area. We suspect this is happening because the infinite scrolling logic is basically reusing the rows when you scroll around, and something in that logic isn't clearing away the focused-cell part name when it should.
Important: You must use the mouse wheel to scroll, not the scrollbar, otherwise the cell will lose focus.
Expected outcome
The focus ring should remain on the effectively focussed cell and not be visible on the reused components.
Minimal reproducible example
Can be reproduced on the documentary page of Vaadin: here
Steps to reproduce
Environment
Vaadin version(s): 24.4 and older OS: Issue is not OS related
Browsers
Issue is not browser related