diff --git a/CHANGELOG.md b/CHANGELOG.md index ea63e293a..29fa94d89 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/src/dash-table/handlers/cellEvents.ts b/src/dash-table/handlers/cellEvents.ts index e3f3e9875..c39048457 100644 --- a/src/dash-table/handlers/cellEvents.ts +++ b/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; diff --git a/tests/cypress/tests/standalone/scrolling_test.ts b/tests/cypress/tests/standalone/scrolling_test.ts index 5ed8377bf..9c6532de7 100644 --- a/tests/cypress/tests/standalone/scrolling_test.ts +++ b/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'); }); }); }); \ No newline at end of file