angular-ui/ui-grid

Cell-Nav does not automatically double click into editable input when scrolling

Open

#6,150 opened on Apr 4, 2017

View on GitHub
 (1 comment) (0 reactions) (0 assignees)JavaScript (5,395 stars) (2,496 forks)batch import
help wanted

Description

Using ui-grid - v4.0.2 - 2016-12-30

Hello,

I have the following two issues related to cell-navigation during scroll events.

1. Keypress ArrowDown scrolling with custom cellTemplate and custom editableCellTemplate

Pre-conditions: colDef has a custom cellTemplate and a custom editableCellTemplate have an input inside a div with a height of 100% on the both the div and the input.

(My requirement is to make the editable cells look like inputs even when they are not in focus)

The "ArrowDown" keypress navigation through editable cells is broken when a scroll event takes place on the viewport. The new cell fails to get dblclick'ed into.This continues for a few more cells and suddenly the cell-nav seems to works properly on a random jump. Depending on the size of the gridOption.data and the viewport the number of "skipped cells" will vary.

Steps to Reproduce:

  • Click into the first cell in 'My Fancy Column'
  • Navigate down the cells by pressing the down arrow key, once for each jump
  • You will see that as soon as the grid scrolls, to bring a new row into the viewport, the new 'My Fancy Column' cell does not get 'dblclick'ed into

If the height is dropped to >95% or auto. the downward navigation seems to work again. But this means that I see some space between the cells of a column (which I do not want).

(Change the height by editing the ".editable-cell, div.ui-grid-cell .editable-cell input" styling in main.css)

2. Keypress ArrowUp scrolling with custom/default cellTemplate and editableCellTemplate

The "ArrowDown" keypress navigation works fine with default templates (because I think the height is auto) and the next editable cell gets 'dblclick'ed into i.e. the cellTemplate is switched out for the editableCellTemplate and the text inside the input is selected.

The same functionality breaks when the grid scrolls up on a keypress event (not always though). Cells in the middle rows fails get 'dblclick'ed into

Steps to Reproduce:

  • Comment out the cellTemplate and editableCellTemplate on app.js on the plunk
  • Click into a cell in 'My Fancy Column'
  • Scroll all the way down in the grid by keeping the down arrow key pressed
  • Navigate up the cell by pressing the up arrow key, once for each jump
  • You will see that the cells in the middle rows do not get 'dblclick'ed into

Please look at this plunk.

Contributor guide

Cell-Nav does not automatically double click into editable input when scrolling · angular-ui/ui-grid#6150 | Good First Issue