Skip to content

fix: DataTable tooltip placement on paginated pages#3631

Open
LarytheLord wants to merge 4 commits intoplotly:devfrom
LarytheLord:fix/datatable-tooltip-pagination-1848
Open

fix: DataTable tooltip placement on paginated pages#3631
LarytheLord wants to merge 4 commits intoplotly:devfrom
LarytheLord:fix/datatable-tooltip-pagination-1848

Conversation

@LarytheLord
Copy link

Summary

This fixes DataTable tooltip placement on paginated pages by correcting how tooltip row indices are tracked in cell mouse handlers.

What changed

  • In cellEvents:
    • handleEnter() now stores currentTooltip.row directly from the provided row index.
    • handleMove() now compares/updates against the provided row index directly.
  • In tooltip conditional matching:
    • ifRowIndex(...) now evaluates against the virtualized source index for the visible row.
  • Added regression test:
    • components/dash-table/tests/js-unit/cellEvents_tooltip_pagination_test.ts
    • Verifies tooltip row state remains correct for paginated row index scenarios.

Context

This ports and completes the approach from the old plotly/dash-table PR:

Related issue:

Validation

From components/dash-table:

  • npm ci
  • npm run private::test.unit -- --grep "cell events - tooltip row index with pagination"
  • npm run private::lint.ts -- src/dash-table/handlers/cellEvents.ts src/dash-table/derived/table/tooltip.ts tests/js-unit/cellEvents_tooltip_pagination_test.ts

Port the pagination tooltip row-index fix from plotly/dash-table#906 and add a regression unit test for paginated row handling in cell event tooltip state.

Signed-off-by: LarytheLord <llawlietbagsum@gmail.com>
@LarytheLord
Copy link
Author

CI note from my side:

The failing CircleCI job (dcc-312) appears unrelated to this DataTable tooltip change.

Failure details:

  • Failing test: tests/integration/calendar/test_portal.py::test_dppt000_datepicker_single_default
  • Error: Uncaught TypeError: Cannot read properties of null (reading 'value')
  • Component under test is DatePicker portal behavior, while this PR only modifies dash-table tooltip row-index handling and dash-table unit tests.

I can rework/follow up immediately if a maintainer wants any additional validation, but this looks like an external/flaky failure path outside the touched files.

@LarytheLord
Copy link
Author

Follow-up pushed in commit 62aace2 to address the recurring Cannot read properties of null (reading 'value') error in DatePicker portal tests.

Root cause was a debounced callback in dcc.Input firing after the input unmounted (calendar closed), then reading input.current.value.

Changes in this commit:

  • guard direct input.current reads/writes when ref is null
  • make onEvent resilient when callback runs post-unmount
  • clear pending debounce timer on cleanup to avoid stale callbacks

This targets the JS console error that was tripping test_portal assertions in dcc-312.

@LarytheLord
Copy link
Author

CI follow-up: I inspected the latest failing CircleCI run (44e7e2ae-4fc5-4f35-b835-627448f1d3c9).

  • Current failing test is tests/integration/renderer/test_multi_output.py::test_rdmo004_multi_output_circular_dependencies.
  • This is different from the original DatePicker null-ref failure that this PR addressed (and for which I pushed commit 62aace2).
  • The new failure appears in renderer multi-output integration coverage, which is outside the touched code path in this PR.

If maintainers prefer, I can rebase/retrigger, but based on the log this looks unrelated to the fix in this branch.

@LarytheLord
Copy link
Author

Pushed another follow-up (65da12a) to address the broader integration regressions seen in CircleCI after my previous Input ref-guard patch.

What I changed:

  • Restored Input.tsx behavior to the original logic and dependency pattern.
  • Kept only the minimal safety fix for stale debounced callbacks:
    • guard onEvent() when input.current is null
    • optional-chain setSelectionRange in delayed cursor restore
    • clear pending debounce timeout on unmount

This avoids the behavioral side-effects from the earlier broader refactor while still preventing the null-ref crash.

@LarytheLord
Copy link
Author

Follow-up pushed in c08b39a: I removed the unrelated components/dash-core-components/src/components/Input.tsx change so this PR is now strictly scoped to DataTable tooltip pagination behavior (dash-table only). This should reduce unrelated CI/visual churn on review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

dashtable with pagination: tooltips appear in wrong place

1 participant