fix: ensure no focus outline when item is scrolled out of view

[vursen]

Description

Fixes the issue where the focus outline repeatedly appeared on random items as the user scrolled when the actual focused item was out of view. This specifically happened if the item was focused by the mouse and a custom CSS was applied to show the focus outline on clicks:

vaadin-grid::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);
}

Depends on

• refactor: clean up keyboard navigation mixin #7977

Fixes #7614

Type of change

• Bugfix

[vursen]

note: Debouncer + __updateItemsFocusable fixes #7659 (comment). It also fixes cases where scrolling back to the focused item is triggered by Tab or an arrow key.

[vursen]

Here is a snippet that I used for testing:

<style>
  vaadin-grid::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);
  }
</style>

<script type="module">
  import '@vaadin/grid';

  const grid = document.querySelector('vaadin-grid');

  grid.items = Array.from({ length: 500 }, (_, i) => `Item-${i}`);

  grid.querySelectorAll('vaadin-grid-column').forEach((column) => {
    column.headerRenderer = (root, column, model) => {
      root.textContent = 'Header';
    }

    column.renderer = (root, column, model) => {
      root.textContent = model.item;
    }

    column.footerRenderer = (root, column, model) => {
      root.textContent = 'Footer';
    }
  })
</script>

<vaadin-grid>
  <vaadin-grid-column></vaadin-grid-column>
  <vaadin-grid-column></vaadin-grid-column>
</vaadin-grid>

Before:

Screen.Recording.2024-10-17.at.10.38.31.mov

After:

Screen.Recording.2024-10-17.at.10.39.06.mov

[vursen]

note: This hides the default browser outline that otherwise appears when the focused-cell part is removed. It appears because the virtualizer element remains focused even after the focused item that was previously rendered in that element is no longer visible.

[vursen]

note: This is an optimization to avoid triggering the debouncer when there is no focus within the items container.

[vursen]

One test fails in Webkit. I'm investigating... Fixed.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud