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 Jun 19, 2020
1 parent de304ec commit 5f38f8d
Showing 1 changed file with 13 additions and 0 deletions.
13 changes: 13 additions & 0 deletions Keyboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,12 @@ 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._focusOnNode) { return; }

// 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,
target = this[cellNavigation ? "cell" : "row"](event),
columnId = cellNavigation && target.column.id,
Expand Down Expand Up @@ -471,6 +477,13 @@ var moveFocusPageDown = Keyboard.moveFocusPageDown = function(event){

var moveFocusHorizontal = Keyboard.moveFocusHorizontal = function(event, steps){
if(!this.cellNavigation){ return; }

// 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
currentNode = this["_focused" + (isHeader ? "Header" : "") + "Node"];

Expand Down

0 comments on commit 5f38f8d

Please sign in to comment.