Grid Is Scrolled Away While The Cell Being Edited Remains In The Position It Was Activated

[apaly]

Hi, You have done a really nice work with this library. I observed an issue while reading your tutorial at https://canvas-datagrid.js.org/#tutorials on how to use the grid. When one is editing a cell and one scrolls using the mouse scroll wheel, the grid moves will the scroll but the cell being edited remains in the position it was activated. Below is a screenshot of what it looks like.

Expected behavior and actual behavior.

I would have expected that the cell being edited would scroll with the grid or become closed when the grid moves past it.

Steps to reproduce the problem.

1. Goto: https://canvas-datagrid.js.org/#tutorials
2. Double a cell to edit it
3. Turn the mouse wheel.

Specifications like the version of the project, operating system, or hardware.

I view the website Chrome and Firefox and they both gave the same result.

I hope this can be fixed

[ndrsn]

Hi @apaly, thanks for the bug report! I can confirm this behaviour — did not notice it before, I will have to look into it.

[apaly]

Hi @ndrsn, May I ask if this bug has been fixed? The use case for which I would to use canvas-datagrid requires that this bug is fixed. So I am eagerly wait for the bug fix.

[TonyGermaneri]

No it has not. PRs are welcome. It seems like the issue is that during edit the textbox needs to be hooked into the scroll event. Seems pretty straight forward. If you would like pointers on how to make the edit, I'm happy to help out, otherwise it'll probably sit here for some time.

[apaly]

Hi @TonyGermaneri, Thanks for your reply.

Sure, I would appreciate your guidance on how to fix this.

[TonyGermaneri]

By modifying the scroll setter you should be able to intercept all scroll events that cause the grid to move.

Be sure to test the changes on touch devices like ipad or android.

Scroll setter: https://github.com/TonyGermaneri/canvas-datagrid/blob/master/lib/intf.js#L999

I think you would need to:

1. check if self.input exists
2. if it exists, decide if it needs to be moved on the setting of scroll

Other maybe helpful links

This is where the edit input is created https://github.com/TonyGermaneri/canvas-datagrid/blob/master/lib/dom.js#L250

This is where it is attached to the body https://github.com/TonyGermaneri/canvas-datagrid/blob/master/lib/dom.js#L332

THANK YOU VERY MUCH FOR HELPING!!!

[apaly]

Hi @TonyGermaneri, Thanks for your reply.