Table automatically scrolls to bottom of page when using in-cell dropdown

[JPeroutek]

System Info

• Windows 7 (x64)
• Dash v1.0.0
• dash-table v4.0.0
• Python 3.5
• Firefox 67.0.4

Issue Description

When creating a large DataTable with certain columns rendered as dropdowns, activating a dropdown scrolls the user to the bottom of the page. This is an annoyance to our end-users, especially on very large tables.

Code Sample

import dash
import dash_html_components as html
import dash_table

app = dash.Dash(__name__)

table_data = [{"index": i, "dd": ''} for i in range(1000)]

app.layout = html.Div([
    dash_table.DataTable(
        data=table_data,
        columns=[
            {"id": "index", "name": "index"},
            {"id": "dd", "name": "dd", "presentation": "dropdown"},
        ],
        editable=True,
        dropdown={
            "dd":{
                "options": [
                    {"label": str(i), "value": str(i)} for i in range(5)
                ]
            }
        }
    )
])

if __name__ == "__main__":
    app.run_server(debug=True)

[arheinjohnson]

Hi! Is there any update on workarounds for this bug? It's not really feasible for me to have a Dash DataTable with ~100 rows but every dropdown selection moves the user to the bottom of the page.

[JPeroutek]

I haven’t found a workaround. We just asked our users to deal with it, as the cell values don’t need to be changed that often in our use case. What might work best for you would be to paginate your table so the scrolling isn’t too intrusive.

[arheinjohnson]

Ah, neither paginating nor dealing with it will work for us. Every row is meant to have user input from the drop-down and the whole form should be worked on / viewed at once, so dealing with this bug would mean constantly scrolling upwards. Any other recommendations for getting this resolved?

-- I'm gonna go ahead and try out pagination because the value of drop-downs might outweigh the number of pages to page through.