fix: only create focus button mode div for body cells (#7274) (#7276)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Mar 26, 2024 · 573389b · 573389b
1 parent 4e8f960
commit 573389b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/packages/grid/src/vaadin-grid-mixin.js b/packages/grid/src/vaadin-grid-mixin.js
@@ -574,10 +574,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);
 
@@ -666,6 +662,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');
@@ -709,7 +708,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
@@ -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');
+  });
 });