Skip to content

Commit 6698c12

Browse files
Artur-claude
andcommitted
fix: handle Tab navigation from grid in overlay with focus-trap
When grid is inside an overlay with focus-trap, Tab from grid cells now correctly moves focus to the next element in the overlay by temporarily removing focusexit from the Tab order. This allows natural Tab flow to work in both regular grid scenarios (with footer content) and overlay scenarios. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent cd1d0af commit 6698c12

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -715,10 +715,19 @@ export const KeyboardNavigationMixin = (superClass) =>
715715
return;
716716
}
717717

718-
// When Tab (forward) would go to focusexit, let the natural Tab order work instead
719-
// This allows tabbing to footer slot content that's outside the scroller
718+
// When Tab (forward) would go to focusexit, skip the grid's Tab handling entirely
719+
// to allow natural Tab order to work for footer content or overlay scenarios
720720
if (focusTarget === this.$.focusexit && !e.shiftKey) {
721+
// Prevent focus-trap logic from intercepting the event.
722+
e.stopPropagation();
721723
this.toggleAttribute('navigating', true);
724+
// Remove focusexit from Tab order before the browser processes Tab
725+
this.$.focusexit.tabIndex = -1;
726+
// Restore it after the current event completes
727+
setTimeout(() => {
728+
this.$.focusexit.tabIndex = 0;
729+
}, 0);
730+
// Don't prevent default and don't focus anything - let browser handle Tab naturally
722731
return;
723732
}
724733

0 commit comments

Comments
 (0)