Scenario:
- Dash Dropdown has several options with a default value
- User chooses non-default option
- 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?