Page jumps to selected cell on table on rerender #8
Description
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!