From 53969547181fac6055b37844fc58036ae7cdccc1 Mon Sep 17 00:00:00 2001 From: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com> Date: Mon, 15 Apr 2024 09:53:13 +0300 Subject: [PATCH] fix: do not move focus when focused in on grid via clicking (#7323) (#7331) --- .../grid/src/vaadin-grid-keyboard-navigation-mixin.js | 10 ++++++---- packages/grid/test/keyboard-navigation.test.js | 11 +++++++++++ 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js b/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js index c7010adba7..37a079d27c 100644 --- a/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js +++ b/packages/grid/src/vaadin-grid-keyboard-navigation-mixin.js @@ -800,10 +800,12 @@ export const KeyboardNavigationMixin = (superClass) => const rootTarget = e.composedPath()[0]; if (rootTarget === this.$.table || rootTarget === this.$.focusexit) { - // The focus enters the top (bottom) of the grid, meaning that user has - // tabbed (shift-tabbed) into the grid. Move the focus to - // the first (the last) focusable. - this._predictFocusStepTarget(rootTarget, rootTarget === this.$.table ? 1 : -1).focus(); + if (!this._isMousedown) { + // The focus enters the top (bottom) of the grid, meaning that user has + // tabbed (shift-tabbed) into the grid. Move the focus to + // the first (the last) focusable. + this._predictFocusStepTarget(rootTarget, rootTarget === this.$.table ? 1 : -1).focus(); + } this._setInteracting(false); } else { this._detectInteracting(e); diff --git a/packages/grid/test/keyboard-navigation.test.js b/packages/grid/test/keyboard-navigation.test.js index 9c318231a0..c0af1c1316 100644 --- a/packages/grid/test/keyboard-navigation.test.js +++ b/packages/grid/test/keyboard-navigation.test.js @@ -547,6 +547,17 @@ describe('keyboard navigation', () => { expect(grid.shadowRoot.activeElement).to.equal(tabbableElements[3]); }); + it('should not enter grid on table click', () => { + const tabbableElements = getTabbableElements(grid.shadowRoot); + + // Click and focusin on table element + mouseDown(tabbableElements[0]); + focusin(tabbableElements[0], focusable); + + // Expect no focus on header cell + expect(grid.shadowRoot.activeElement).to.be.null; + }); + it('should set native focus to header on header cell click', () => { const tabbableElements = getTabbableElements(grid.shadowRoot); focusFirstHeaderCell();