Skip to content

Commit

Permalink
Fix keyboard navigation when the contentNode is focused
Browse files Browse the repository at this point in the history
In a grid with few enough rows that there is empty space below them the user
can click below the rows causing the grid's contentNode to receive focus.
If the arrow keys are then pressed to attempt cell/row navigation an error
is thrown. This change checks for and ignores selection of the contentNode.

It specifically checks for contentNode instead of the more resilient/generic
"not a row or cell" because that condition is more difficult to determine.
grid.row() returns undefined for grid.contentNode, but also for any node
within the header. Header navigation logic depends on this.

Fixes #1297
  • Loading branch information
msssk committed May 22, 2020
1 parent e5d31e8 commit d3e89b1
Showing 1 changed file with 22 additions and 7 deletions.
29 changes: 22 additions & 7 deletions Keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -465,12 +465,20 @@ define([

var moveFocusVertical = Keyboard.moveFocusVertical = function (event, steps) {
// if there is no _focusNode (for example, when the grid doesn't have data) don't try to find the next focus row/cell
if (!this._focusedNode) { return; }
if (!this._focusedNode) {
return;
}

var cellNavigation = this.cellNavigation,
target = this[cellNavigation ? 'cell' : 'row'](event),
columnId = cellNavigation && target.column.id,
next = this.down(this._focusedNode, steps, true);
// don't attempt navigation if a cell or row is not currently focused
// this can happen if empty space within the grid has been clicked
if (event.target === this.contentNode) {
return;
}

var cellNavigation = this.cellNavigation;
var target = this[cellNavigation ? 'cell' : 'row'](event);
var columnId = cellNavigation && target.column.id;
var next = this.down(this._focusedNode, steps, true);

// Navigate within same column if cell navigation is enabled
if (cellNavigation) {
Expand Down Expand Up @@ -501,8 +509,15 @@ define([
if (!this.cellNavigation) {
return;
}
var isHeader = !this.row(event), // header reports row as undefined
currentNode = this['_focused' + (isHeader ? 'Header' : '') + 'Node'];

// don't attempt navigation if a cell or row is not currently focused
// this can happen if empty space within the grid has been clicked
if (event.target === this.contentNode) {
return;
}

var isHeader = !this.row(event); // header reports row as undefined
var currentNode = this['_focused' + (isHeader ? 'Header' : '') + 'Node'];

this._focusOnNode(this.right(currentNode, steps), isHeader, event);
event.preventDefault();
Expand Down

0 comments on commit d3e89b1

Please sign in to comment.