angular-ui/ui-grid

Cell remains in edit mode after Enter key on last row

Open

#6,667 opened on Apr 11, 2018

View on GitHub
 (0 comments) (0 reactions) (1 assignee)JavaScript (5,395 stars) (2,496 forks)batch import
good first issue

Description

It is reproducible on http://plnkr.co/edit/9Zku7pBsCP2racyYButW?p=preview, but is also on tutorial page: http://ui-grid.info/docs/#!/tutorial/309_editable_with_cellnav

Symptoms: When last row is being edited using cellNav and Enter is pressed, last row remains in edit mode. Edit mode should end in this case.

Steps to reproduce:

  1. Scroll to the last row in grid
  2. Double click Name cell
  3. Edit the value and press Enter
  4. As you can see cell remained in edit mode.

Fix proposal: I found this line which is causing it. In method:

UiGridCellNav.prototype.getRowColDown

there are following lines:

if (curRowIndex === focusableRows.length - 1) {
  return new GridRowColumn(curRow, focusableCols[curColIndex]); //return same row
}
else {
  //down one row
  return new GridRowColumn(focusableRows[curRowIndex + 1], focusableCols[curColIndex]);
}

Replace with:

if (curRowIndex === focusableRows.length - 1) {
  return null; // nowhere to navigate
}
else {
  //down one row
  return new GridRowColumn(focusableRows[curRowIndex + 1], focusableCols[curColIndex]);
}

Then method in usages of method UiGridCellNav.prototype.getRowColDown null check its result and if it is null do not proceed further with action.

This helped us to solve this issue but it would be great if fix can be a part of ui-grid's regular release.

Contributor guide

Cell remains in edit mode after Enter key on last row · angular-ui/ui-grid#6667 | Good First Issue