fix: stop propagation for grid Tab keydown (#3480)

packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -614,6 +614,9 @@ export const KeyboardNavigationMixin = (superClass) =>
     _onTabKeyDown(e) {
       const focusTarget = this._predictFocusStepTarget(e.composedPath()[0], e.shiftKey ? -1 : 1);
 
+      // Prevent focus-trap logic from intercepting the event.
+      e.stopPropagation();
+
       if (focusTarget === this.$.table) {
         // The focus is about to exit the grid to the top.
         this.$.table.focus();

packages/grid/test/overlay-focus-trap.test.js

@@ -0,0 +1,52 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
+import { sendKeys } from '@web/test-runner-commands';
+import '@vaadin/button';
+import '@vaadin/vaadin-overlay';
+import '../vaadin-grid.js';
+import { flushGrid } from './helpers.js';
+
+describe('overlay focus-trap', () => {
+  let overlay, grid, button;
+
+  function getFirstHeaderCell() {
+    return grid.$.header.children[0].children[0];
+  }
+
+  beforeEach(async () => {
+    overlay = fixtureSync(`<vaadin-overlay focus-trap></vaadin-overlay>`);
+    overlay.renderer = (root) => {
+      if (root.firstChild) {
+        return;
+      }
+
+      root.innerHTML = `
+        <vaadin-grid style="width: 200px">
+          <vaadin-grid-column path="name"></vaadin-grid-column>
+        </vaadin-grid>
+        <vaadin-button>Button</vaadin-button>
+      `;
+
+      grid = root.firstElementChild;
+      grid.items = [{ name: 'foo' }, { name: 'bar' }];
+      flushGrid(grid);
+
+      button = root.lastElementChild;
+    };
+    overlay.opened = true;
+    await oneEvent(overlay, 'vaadin-overlay-open');
+  });
+
+  it('should correctly move focus on Tab when inside overlay', async () => {
+    const headerCell = getFirstHeaderCell();
+    headerCell.focus();
+
+    // Move focus to grid body
+    await sendKeys({ press: 'Tab' });
+
+    // Move focus to the button
+    await sendKeys({ press: 'Tab' });
+
+    expect(document.activeElement).to.equal(button);
+  });
+});