diff --git a/components/dash-table/src/dash-table/derived/table/tooltip.ts b/components/dash-table/src/dash-table/derived/table/tooltip.ts index 54620dea99..f9d5929aad 100644 --- a/components/dash-table/src/dash-table/derived/table/tooltip.ts +++ b/components/dash-table/src/dash-table/derived/table/tooltip.ts @@ -42,7 +42,10 @@ function getSelectedTooltip( return ( !tt.if || (ifColumnId(tt.if, id) && - ifRowIndex(tt.if, row) && + ifRowIndex( + tt.if, + virtualized.indices[row - virtualized.offset.rows] + ) && ifFilter( tt.if, virtualized.data[row - virtualized.offset.rows] diff --git a/components/dash-table/src/dash-table/handlers/cellEvents.ts b/components/dash-table/src/dash-table/handlers/cellEvents.ts index 8ece59511e..6fc6d02dfa 100644 --- a/components/dash-table/src/dash-table/handlers/cellEvents.ts +++ b/components/dash-table/src/dash-table/handlers/cellEvents.ts @@ -160,13 +160,13 @@ export const handleEnter = ( idx: number, i: number ) => { - const {setState, virtualized, visibleColumns} = propsFn(); + const {setState, visibleColumns} = propsFn(); setState({ currentTooltip: { header: false, id: visibleColumns[i].id, - row: virtualized.indices[idx - virtualized.offset.rows] + row: idx } }); }; @@ -202,15 +202,14 @@ export const handleMove = ( idx: number, i: number ) => { - const {currentTooltip, setState, virtualized, visibleColumns} = propsFn(); + const {currentTooltip, setState, visibleColumns} = propsFn(); const c = visibleColumns[i]; - const realIdx = virtualized.indices[idx - virtualized.offset.rows]; if ( currentTooltip && currentTooltip.id === c.id && - currentTooltip.row === realIdx && + currentTooltip.row === idx && !currentTooltip.header ) { return; @@ -220,7 +219,7 @@ export const handleMove = ( currentTooltip: { header: false, id: c.id, - row: realIdx + row: idx } }); }; diff --git a/components/dash-table/tests/js-unit/cellEvents_tooltip_pagination_test.ts b/components/dash-table/tests/js-unit/cellEvents_tooltip_pagination_test.ts new file mode 100644 index 0000000000..2291914c55 --- /dev/null +++ b/components/dash-table/tests/js-unit/cellEvents_tooltip_pagination_test.ts @@ -0,0 +1,52 @@ +import {expect} from 'chai'; + +import {handleEnter, handleMove} from 'dash-table/handlers/cellEvents'; + +describe('cell events - tooltip row index with pagination', () => { + it('uses the provided row index when entering a cell', () => { + let state: any; + const propsFn = () => + ({ + setState: (next: any) => { + state = next; + }, + visibleColumns: [{id: 'Description'}], + virtualized: { + indices: [5, 6, 7, 8, 9], + offset: {rows: 0, columns: 0} + } + }) as any; + + handleEnter(propsFn, 6, 0); + + expect(state.currentTooltip.row).to.equal(6); + expect(state.currentTooltip.id).to.equal('Description'); + expect(state.currentTooltip.header).to.equal(false); + }); + + it('uses the provided row index when moving between cells', () => { + let state: any; + const propsFn = () => + ({ + currentTooltip: { + header: false, + id: 'Description', + row: 5 + }, + setState: (next: any) => { + state = next; + }, + visibleColumns: [{id: 'Description'}], + virtualized: { + indices: [5, 6, 7, 8, 9], + offset: {rows: 0, columns: 0} + } + }) as any; + + handleMove(propsFn, 6, 0); + + expect(state.currentTooltip.row).to.equal(6); + expect(state.currentTooltip.id).to.equal('Description'); + expect(state.currentTooltip.header).to.equal(false); + }); +});