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!