dcc.Dropdown resets to default value when parents style is changed

[notatallshaw]

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.

[alexcjohnson]

Is it fixed if widget.value is an input to a different callback? If so, this will be fixed in the next release, by plotly/dash-renderer#126

[notatallshaw]

Is it fixed if widget.value is an input to a different callback? If so, this will be fixed in the next release, by plotly/dash-renderer#126

Confirmed, I wrote this code and it is fixed:

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),
              html.Div(id='dummy'),
              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


@app.callback(output=dash.dependencies.Output('dummy', 'children'),
              inputs=[dash.dependencies.Input('widget', 'value')])
def change_height(value):
    raise dash.exceptions.PreventUpdate


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

Thanks for the info!

[notatallshaw]

Fixed with Dash 0.40, thanks!