Issue 583 - Edit cell with scrolled virtualized view (#584)

Author: Marc-Andre-Rivet

CHANGELOG.md

@@ -14,6 +14,9 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 [#18](https://github.com/plotly/dash-table/issues/18)
 - Fix row selection vertical and horizontal alignment
 
+[#583](https://github.com/plotly/dash-table/issues/583)
+- Fix regression when editing the content of a cell in a scrolled virtualized table
+
 ### Added
 [#319](https://github.com/plotly/dash-table/issues/319)
 - New 'loading_state' prop that contains information about which prop, if any, is being computed.

src/dash-table/handlers/cellEvents.ts

@@ -121,7 +121,7 @@ export const handleChange = (propsFn: () => ICellFactoryProps, idx: number, i: n
     } = propsFn();
 
     const c = visibleColumns[i];
-    const realIdx = virtualized.indices[idx];
+    const realIdx = virtualized.indices[idx - virtualized.offset.rows];
 
     if (!c.editable) {
         return;
@@ -152,7 +152,7 @@ export const handleEnter = (propsFn: () => ICellFactoryProps, idx: number, i: nu
     } = propsFn();
 
     const c = visibleColumns[i];
-    const realIdx = virtualized.indices[idx];
+    const realIdx = virtualized.indices[idx - virtualized.offset.rows];
 
     setState({
         currentTooltip: {
@@ -179,7 +179,7 @@ export const handleMove = (propsFn: () => ICellFactoryProps, idx: number, i: num
     } = propsFn();
 
     const c = visibleColumns[i];
-    const realIdx = virtualized.indices[idx];
+    const realIdx = virtualized.indices[idx - virtualized.offset.rows];
 
     if (currentTooltip && currentTooltip.id === c.id && currentTooltip.row === realIdx) {
         return;

tests/cypress/tests/standalone/scrolling_test.ts

@@ -50,7 +50,21 @@ variants.forEach(([mode, flavors]) => {
 
             cy.get('.row-1').scrollTo(0, 0);
             DashTable.getSelectedCells().should('have.length', 6);
+        });
+
+        it('can edit cell', () => {
+            DashTable.toggleScroll(false);
+            DashTable.getCell(0, 0).click();
+            DashTable.toggleScroll(true);
+
+            cy.get('.row-1').scrollTo(0, 1000);
+            cy.wait(1000);
+
+            DashTable.getCell(10, 1).click();
+            DOM.focused.type(`Edited${Key.Enter}`);
 
+            DOM.focused.type(`${Key.ArrowUp}`);
+            DOM.focused.should('have.value', 'Edited');
         });
     });
 });