Page jumps to selected cell on table on rerender

[mjclawar]

Description

When a DataTable is in a dash app with scroll, the page location jumps to the selected cell on the table whenever anything on the page updates. This makes using the experimental DataTable in a scrollable app very frustrating for a user. This occurs on (at least)

• Chrome on Linux
• Firefox on Linux
• Chrome on Windows 10

Desired behavior

The page should not jump to the table when other components are updated or the page is refreshed.

Example code

import dash

import dash_html_components as html
import dash_table_experiments as dt

app = dash.Dash(name='dash')

app.layout = html.Div(children=[
    html.Div('This is a tall div', style=dict(height=1000, width='100%')),
    dt.DataTable(
        rows=[
            {'a': 1, 'b': 2},
            {'a': 2, 'b': 3},
        ],
        columns=['a', 'b']),
    html.Div('This is another tall div', style=dict(height=1000, width='100%')),
])

if __name__ == '__main__':
    app.run_server()

Running this app and loading/refreshing the page in a browser with a height noticeably less than 1000px causes the page to jump to the first cell in column 'a'. We've noted in other more complex instances that clicking on another cell in the table and then updating any other component causes the page to jump to the selected cell (with the blue highlighting).

Misc.

Without having dug into the code (since we're just now getting into making our own custom Dash components), I would guess this may be an underlying React component issue(?). Certainly willing to help dig into this issue if needed since we'd love to use this component, but hopefully there's an easy, obvious fix!

[chriddyp]

Thanks for reporting! Ugh yeah, this is really annoying.

Looking through react-data-grid repo, it seems like this is the issue: https://github.com/adazzle/react-data-grid/issues/227#issuecomment-189726254

[mjclawar]

Also related to https://github.com/adazzle/react-data-grid/issues/310 and then rejected PR here https://github.com/adazzle/react-data-grid/pull/311. From the PR: "The solution exists in this PR, but it looks like the team didn't believe this was a problem and closed the issue."

Is it possible to just add a disable focus-type prop to the DataTable?

[mjclawar]

Update: As a quick fix, it looks like if you explicitly create the DataTable with editable=False, it does not jump. However, if you click on a cell and forget to click away from the table, it will continue to jump when other pieces on the page are updated.

app.layout = html.Div(children=[
    html.Div('This is a tall div', style=dict(height=1000, width='100%')),
    dt.DataTable(
        rows=[
            {'a': 1, 'b': 2},
            {'a': 2, 'b': 3},
        ],
        columns=['a', 'b'],
        editable=False),
    html.Div('This is another tall div', style=dict(height=1000, width='100%')),
])

Is there a current benefit to the DataTable being editable?

[ZsofiaHa3]

Also when I have DataTable with editable=False, it still jumps on top.

Is there a fix for it?

[LiamGeoghan]

I've also been experiencing these jumps when clicking outside of the table (unless I scroll the focused cell out of view within the table).

[HoustonJ2013]

The editable table function is so powerful, but this bug is really annoying for app our users.

[chriddyp]

👋 Hey everyone. Because of bugs like this, among many others, we decided that we needed to build some new foundations for the DataTable. We've recently open sourced this work and I recommend migrating over to it: 👉 Documentation: https://dash.plot.ly/datatable 👉 GitHub: https://github.com/plotly/dash-table 👉 Community Forum Announcement: https://community.plot.ly/t/introducing-dash-datatable/15242

Many thanks to our commercial customers that sponsored this development effort.