From ffcd0998649f874f5d926c1a68e8e322897ab9fb Mon Sep 17 00:00:00 2001 From: Nii Yeboah Date: Mon, 22 Mar 2021 17:24:47 +0200 Subject: [PATCH 1/3] cell-focus event Add dispatch cell-focus event on cell-focusin Add cell-focus test --- .../src/vaadin-grid-keyboard-navigation-mixin.js | 3 +++ .../vaadin-grid/test/keyboard-navigation.test.js | 12 ++++++++++++ 2 files changed, 15 insertions(+) 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..f992b97e662 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. + this.dispatchEvent(new CustomEvent('cell-focus')); } 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..15a1b739a00 100644 --- a/packages/vaadin-grid/test/keyboard-navigation.test.js +++ b/packages/vaadin-grid/test/keyboard-navigation.test.js @@ -1827,6 +1827,18 @@ describe('keyboard navigation', () => { expect(spy.callCount).to.equal(1); }); + + it('should dispatch cell-focus on keyboard navigation', () => { + tabToBody(); + right(); + + const spy = sinon.spy(); + grid.addEventListener('cell-focus', spy); + + left(); + + expect(spy.callCount).to.equal(1); + }); }); }); From 7594e8a7df37c20913b7ab101d4f499463075d7e Mon Sep 17 00:00:00 2001 From: Nii Yeboah Date: Tue, 23 Mar 2021 12:23:53 +0200 Subject: [PATCH 2/3] Dispatch event from inner cell element Add event context test --- .../vaadin-grid-keyboard-navigation-mixin.js | 2 +- .../test/keyboard-navigation.test.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) 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 f992b97e662..81130ff60a6 100644 --- a/packages/vaadin-grid/src/vaadin-grid-keyboard-navigation-mixin.js +++ b/packages/vaadin-grid/src/vaadin-grid-keyboard-navigation-mixin.js @@ -506,7 +506,7 @@ export const KeyboardNavigationMixin = (superClass) => cell._content.dispatchEvent(new CustomEvent('cell-focusin', { bubbles: false })); // Fire a public event for cell focus. - this.dispatchEvent(new CustomEvent('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 15a1b739a00..fc521a09da6 100644 --- a/packages/vaadin-grid/test/keyboard-navigation.test.js +++ b/packages/vaadin-grid/test/keyboard-navigation.test.js @@ -1828,13 +1828,29 @@ describe('keyboard navigation', () => { expect(spy.callCount).to.equal(1); }); - it('should dispatch cell-focus on keyboard navigation', () => { + it('should dispatch cell-focus on keyboard navigation', (done) => { tabToBody(); right(); const spy = sinon.spy(); grid.addEventListener('cell-focus', spy); + grid.addEventListener('cell-focus', (e) => { + const expectedContext = { + column: grid.querySelector('vaadin-grid-column'), + detailsOpened: false, + expanded: false, + index: 0, + item: 'foo', + level: 0, + section: 'body', + selected: false + }; + const context = e.target.getEventContext(e); + expect(context).to.deep.equal(expectedContext); + done(); + }); + left(); expect(spy.callCount).to.equal(1); From 0d44700549470f2ccf0bc101f424095159b4d386 Mon Sep 17 00:00:00 2001 From: Nii Yeboah Date: Thu, 25 Mar 2021 16:16:58 +0200 Subject: [PATCH 3/3] refactor: clean up cell-focus test --- .../test/keyboard-navigation.test.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/vaadin-grid/test/keyboard-navigation.test.js b/packages/vaadin-grid/test/keyboard-navigation.test.js index fc521a09da6..4f2a8b6deeb 100644 --- a/packages/vaadin-grid/test/keyboard-navigation.test.js +++ b/packages/vaadin-grid/test/keyboard-navigation.test.js @@ -1829,23 +1829,25 @@ describe('keyboard navigation', () => { }); 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', spy); grid.addEventListener('cell-focus', (e) => { - const expectedContext = { - column: grid.querySelector('vaadin-grid-column'), - detailsOpened: false, - expanded: false, - index: 0, - item: 'foo', - level: 0, - section: 'body', - selected: false - }; + spy(); + const context = e.target.getEventContext(e); expect(context).to.deep.equal(expectedContext); done(); @@ -1853,7 +1855,7 @@ describe('keyboard navigation', () => { left(); - expect(spy.callCount).to.equal(1); + expect(spy.calledOnce).to.be.true; }); }); });