diff --git a/packages/vaadin-grid/src/vaadin-grid-keyboard-navigation-mixin.js b/packages/vaadin-grid/src/vaadin-grid-keyboard-navigation-mixin.js index 306322b53c9..81130ff60a6 100644 --- a/packages/vaadin-grid/src/vaadin-grid-keyboard-navigation-mixin.js +++ b/packages/vaadin-grid/src/vaadin-grid-keyboard-navigation-mixin.js @@ -504,6 +504,9 @@ export const KeyboardNavigationMixin = (superClass) => } // Inform cell content of the focus (used in ) cell._content.dispatchEvent(new CustomEvent('cell-focusin', { bubbles: false })); + + // Fire a public event for cell focus. + cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true })); } this._detectFocusedItemIndex(e); diff --git a/packages/vaadin-grid/test/keyboard-navigation.test.js b/packages/vaadin-grid/test/keyboard-navigation.test.js index 119d7cb0f32..4f2a8b6deeb 100644 --- a/packages/vaadin-grid/test/keyboard-navigation.test.js +++ b/packages/vaadin-grid/test/keyboard-navigation.test.js @@ -1827,6 +1827,36 @@ describe('keyboard navigation', () => { expect(spy.callCount).to.equal(1); }); + + it('should dispatch cell-focus on keyboard navigation', (done) => { + const expectedContext = { + column: grid.querySelector('vaadin-grid-column'), + detailsOpened: false, + expanded: false, + index: 0, + item: 'foo', + level: 0, + section: 'body', + selected: false + }; + + tabToBody(); + right(); + + const spy = sinon.spy(); + + grid.addEventListener('cell-focus', (e) => { + spy(); + + const context = e.target.getEventContext(e); + expect(context).to.deep.equal(expectedContext); + done(); + }); + + left(); + + expect(spy.calledOnce).to.be.true; + }); }); });