Dev-tools UI - dropdown options bug

[OwenLund]

Hi, I believe I've found some unexpected behavior with the new dev-tools UI feature.

When a dropdown's options contains a null/NaN value - an error appears in the new UI and the dropdown is not rendered in the browser (however no errors are shown in the console). If the app is run with debug=False, the dropdown renders and the nan value appears in the options (but cannot be selected?).

Unfortunately I'm not sure what the expected behavior should be in this scenario - or if this is a valid issue. Please feel free to remove if not.

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

dropdown_list = pd.Series([1,2,3,np.nan])

app.layout = html.Div(children=[
    dcc.Dropdown(
        id='dropdown',
        options=[{'label':f"Option: {i}", 'value':i} for i in dropdown_list]
    )
])

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

[slishak]

I am having the same problem. I have a Dropdown where value can be a list/tuple.

The error is triggered if all three of the options at the bottom of this script are set. Setting any one of them to false will allow the app to work:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    dcc.Dropdown(
        id='dropdown',
        options=[
            {'label': 'String value', 'value': 'string'},
            {'label': 'List value', 'value': ['list', 'of', 'things']}
        ]
    )
])

if __name__ == '__main__':
    app.scripts.config.serve_locally = True
    app.run_server(dev_tools_props_check=True, dev_tools_serve_dev_bundles=True)

Versions:

dash==0.42.0
dash-core-components==0.47.0
dash-html-components==0.16.0
dash-renderer==0.23.0

[byronz]

thanks for trying the dev-tools and report the issue here.

@OwenLund, I was able to see the errors in dev UI using your code snippet

the behavior is expected because the value field inside options is expected to be either a string or a number

https://github.com/plotly/dash-core-components/blob/5b390f39f376de1eebde5c4bbb2d00286d7c01f0/src/components/Dropdown.react.js#L121-L142

@slishak, to be clarified here you don't necessarily need the serve_locally=True to see the dev_ui feature, but you will need it if you want to live debug the js code with the browser. your error is also expected as you were feeding the value a list of strings instead of a single string.

if you need a more flexible data structure for options, that's another discussion, please free to post it on plotly dash community https://community.plot.ly/c/dash

if you guys are following the dash docs https://dash.plot.ly/dash-core-components/dropdown, I do see an opportunity to improve the document as the description is not clear about the rule. I will create an issue in the relevant part to improve it.

[slishak]

Ah right, thanks for the clarification. I thought I remembered reading a long time ago that in options, label had to be a string but value could be any JSON-serialisable object, however I now have no idea where I read that... I've been using that pattern for quite a long time in my apps with no obvious problems until now, but clearly I just got lucky! I will just correct this in my apps, it's not that difficult to fix it. Thanks for the help!