fix: issue with grid when grid table body is clicked and enter key is hit (#2146) (#2187)

Author: hdamr

src/vaadin-grid-keyboard-navigation-mixin.html

@@ -361,16 +361,6 @@
       dstCell.focus();
     }
 
-    /** @private */
-    _parseEventPath(path) {
-      const tableIndex = path.indexOf(this.$.table);
-      return {
-        rowGroup: path[tableIndex - 1],
-        row: path[tableIndex - 2],
-        cell: path[tableIndex - 3]
-      };
-    }
-
     /** @private */
     _onInteractionKeyDown(e, key) {
       const localTarget = e.composedPath()[0];
@@ -390,9 +380,9 @@
           break;
       }
 
-      const {cell} = this._parseEventPath(e.composedPath());
+      const {cell} = this._getGridEventLocation(e);
 
-      if (this.interacting !== wantInteracting) {
+      if (this.interacting !== wantInteracting && cell !== null) {
         if (wantInteracting) {
           const focusTarget = cell._content.querySelector('[focus-target]') ||
             cell._content.firstElementChild;
@@ -533,11 +523,10 @@
 
     /** @private */
     _onCellFocusIn(e) {
-      const location = this._getCellFocusEventLocation(e);
+      const {section, cell} = this._getGridEventLocation(e);
       this._detectInteracting(e);
 
-      if (location) {
-        const {section, cell} = location;
+      if (section && cell) {
         this._activeRowGroup = section;
         if (this.$.header === section) {
           this._headerFocusable = cell;
@@ -574,8 +563,8 @@
 
     /** @private */
     _detectFocusedItemIndex(e) {
-      const {rowGroup, row} = this._parseEventPath(e.composedPath());
-      if (rowGroup === this.$.items) {
+      const {section, row} = this._getGridEventLocation(e);
+      if (section === this.$.items) {
         this._focusedItemIndex = row.index;
       }
     }
@@ -706,33 +695,32 @@
     }
 
     /**
-     * @typedef {Object} CellFocusEventLocation
-     * @property {HTMLTableSectionElement} section - The grid section element that contains the focused cell (header, body, or footer)
-     * @property {HTMLElement} cell - The cell element that received focus or is ancestor of the element that received focus
+     * @typedef {Object} GridEventLocation
+     * @property {HTMLTableSectionElement | null} section - The table section element that the event occurred in (header, body, or footer),
+     * or null if the event did not occur in a section
+     * @property {HTMLTableRowElement | null} row - The row element that the event occurred in, or null if the event did not occur in a row
+     * @property {HTMLTableCellElement | null} cell - The cell element that the event occurred in, or null if the event did not occur in a
+     * cell
      * @private
      */
     /**
-     * Takes a focus event and returns a location object describing in which
-     * section of the grid and in or on which cell the focus event occurred.
-     * The focus event may either target the cell itself or contents of the cell.
-     * If the event does not target a cell then null is returned.
-     * @param {FocusEvent} e
-     * @returns {CellFocusEventLocation | null}
+     * Takes an event and returns a location object describing in which part of the grid the event occurred.
+     * The event may either target table section, a row, a cell or contents of a cell.
+     * @param {Event} e
+     * @returns {GridEventLocation}
      * @private
      */
-    _getCellFocusEventLocation(e) {
+    _getGridEventLocation(e) {
       const path = e.composedPath();
       const tableIndex = path.indexOf(this.$.table);
       // Assuming ascending path to table is: [...,] th|td, tr, thead|tbody, table [,...]
-      const section = tableIndex >= 2 ? path[tableIndex - 1] : null;
+      const section = tableIndex >= 1 ? path[tableIndex - 1] : null;
+      const row = tableIndex >= 2 ? path[tableIndex - 2] : null;
       const cell = tableIndex >= 3 ? path[tableIndex - 3] : null;
 
-      if (!section || !cell) {
-        return null;
-      }
-
       return {
         section,
+        row,
         cell
       };
     }

test/keyboard-navigation.html

@@ -1856,6 +1856,13 @@
 
           expect(grid.hasAttribute('interacting')).to.be.true;
         });
+
+        it('should not throw error when hit enter after focus on table body', () => {
+          expect(() => {
+            grid.$.items.focus();
+            enter(grid);
+          }).not.to.throw(Error);
+        });
       });
 
       describe('focus events on cell content', () => {