Black Lives Matter. Please consider donating to Black Girls Code today.

Dropdown in Datatable causes Browser view repositioned, how do I stop this?

Dash
#1

So you can actually reproduce this in the examples given on the documentation: https://dash.plot.ly/datatable/dropdowns

You can reproduce this as so:

  1. Scroll your browser view so the bottom of the window only shows half the Datatable
  2. Select the top drop down field

Actual Result:

  • The browser view repositions itself so the the bottom of the window aligns with the bottom of the Datatable

Expected Result:

  • Browser view is not repositioned

This is really painful for an app I’m developing where the Datatable is ~150 rows long, if I add a dropdown as one of the columns and you select it in one of the rows towards the top you your browser view gets significantly moved and you have to scroll back to the top of the web page.

Is there some workaround that can be done to stop this?

#2

I created a bug on the github issues tracker: https://github.com/plotly/dash-table/issues/662

With an example:

import dash
import dash_html_components as html
import dash_table

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div('Top'),
    dash_table.DataTable(
        data=[{'test': ''} for _ in range(100)],
        columns=[{'id': 'test', 'name': 'test', 'presentation': 'dropdown'}],
        editable=True,
        dropdown={
            'test': {
                'options': [
                    {'label': 'foo', 'value': 'foo'},
                    {'label': 'bar', 'value': 'bar'},
                    {'label': 'baz', 'value': 'baz'}
                ]
            }
        }
    ),
    html.Div('Bottom'),
])

app.run_server(debug=True)

I’ll update this thread if I ever find a workaround or a fix gets created.

#3

Turns out this is a known issue as it’s been reported multiple times:

Unfortunately the “workaround” of pagination doesn’t work for my use case.