Bug in Dropdown Core Component when parents style gets changed?

Scenario:

  1. Dash Dropdown has several options with a default value
  2. User chooses non-default option
  3. Parent element of Dropdown has style changes

Expected Result: Selected Value of Dropdown does not change

Actual Result: Selected Value of Dropdown is reset to default.

Example Code:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    id='parent-element',
    style={'height': '400px'},
    children=[dcc.Input(id='height-controller',
                        type='number',
                        max=2000,
                        min=100,
                        value=400),
              dcc.Dropdown(id='widget',
                           value='Foo',
                           options=[{'label': 'Foo', 'value': 'Foo'},
                                    {'label': 'Bar', 'value': 'Bar'},
                                    {'label': 'Baz', 'value': 'Baz'}])]
)


@app.callback(output=dash.dependencies.Output('parent-element', 'style'),
              inputs=[dash.dependencies.Input('height-controller', 'value')],
              state=[dash.dependencies.State('parent-element', 'style')])
def change_height(height, current_style):
    if height is None:
        raise dash.exceptions.PreventUpdate

    current_style['height'] = f'{height}px'
    return current_style


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

In this code you can change the selected option of the drop down and then change height of the parent element. The selected option is reset to the default.

I assume I am not going crazy and missing something obvious?

Alex has confirmed this is a known bug that will be fixed in a future dash-render release: https://github.com/plotly/dash-renderer/pull/126

I will update here once fixed.

Edit: This was fixed in Dash 0.40

2 Likes