diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js index b39d81e0fb..83aa7c83d1 100644 --- a/packages/grid/src/vaadin-grid-mixin.js +++ b/packages/grid/src/vaadin-grid-mixin.js @@ -589,10 +589,6 @@ export const GridMixin = (superClass) => }); } - if (column && column._onCellKeyDown) { - cell.addEventListener('keydown', column._onCellKeyDown.bind(column)); - } - const slot = document.createElement('slot'); slot.setAttribute('name', slotName); @@ -681,6 +677,9 @@ export const GridMixin = (superClass) => cell = column._cells.find((cell) => cell._vacant); if (!cell) { cell = this._createCell('td', column); + if (column._onCellKeyDown) { + cell.addEventListener('keydown', column._onCellKeyDown.bind(column)); + } column._cells.push(cell); } cell.setAttribute('part', 'cell body-cell'); @@ -724,7 +723,13 @@ export const GridMixin = (superClass) => // Header & footer const tagName = section === 'header' ? 'th' : 'td'; if (isColumnRow || column.localName === 'vaadin-grid-column-group') { - cell = column[`_${section}Cell`] || this._createCell(tagName, column); + cell = column[`_${section}Cell`]; + if (!cell) { + cell = this._createCell(tagName); + if (column._onCellKeyDown) { + cell.addEventListener('keydown', column._onCellKeyDown.bind(column)); + } + } cell._column = column; row.appendChild(cell); column[`_${section}Cell`] = cell; diff --git a/packages/grid/test/keyboard-navigation-cell-button.common.js b/packages/grid/test/keyboard-navigation-cell-button.common.js index 90972b19de..987ecfac08 100644 --- a/packages/grid/test/keyboard-navigation-cell-button.common.js +++ b/packages/grid/test/keyboard-navigation-cell-button.common.js @@ -5,6 +5,10 @@ import { flushGrid } from './helpers.js'; let grid; +function getHeaderCell(grid, index) { + return grid.$.header.querySelectorAll('[part~="cell"]')[index]; +} + function getRowCell(rowIndex, cellIndex) { return grid.$.items.children[rowIndex].children[cellIndex]; } @@ -89,4 +93,9 @@ describe('keyboard navigation - focus button mode', () => { cell2.focus(); expect(cell.firstChild.getAttribute('part')).to.be.null; }); + + it('should not create a focusable div with role="button" inside the header cell', () => { + const headerCell = getHeaderCell(grid, 0); + expect(headerCell.firstChild.localName).to.equal('slot'); + }); });