Dash: Dropdown 'x' button throws error

[thomasantony]

The following code implements a simple Dropdown that updates a Div element.

import dash
import dash_core_components as dcc
import dash_html_components as html

from dash.dependencies import Input, Output

app = dash.Dash()
app.layout = html.Div([
    html.H1(children='Dropdown test'),
    dcc.Dropdown(
                id='test-selector',
                placeholder='Select a value',
                options=[{'label':'foo', 'value':0},{'label':'bar', 'value':1},{'label':'baz', 'value':2}],
    ),
    html.Div(
        id='foobar'
    )

])

@app.callback(
    Output(component_id='foobar', component_property='children'),
    [Input(component_id='test-selector', component_property='value')]
)
def test_interaction(value):
    print(value)
    return value

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

If you click the second or third options, a small "x" button appears on the right end of the component.

I expected the dropdown to be cleared of any selection I clicked the 'x'. Instead, I get the following error in the console:

Uncaught TypeError: Cannot read property 'value' of null
    at Object.onChange (https://unpkg.com/[email protected]/dash_core_components/bundle.js:13:31574)
    at Object.setValue (https://unpkg.com/[email protected]/dash_core_components/bundle.js:11:11319)
    at Object.clearValue (https://unpkg.com/[email protected]/dash_core_components/bundle.js:11:12224)
    at Object.r (https://unpkg.com/[email protected]/dist/react-dom.min.js:14:5395)
    at a (https://unpkg.com/[email protected]/dist/react-dom.min.js:12:22306)
    at Object.s [as executeDispatchesInOrder] (https://unpkg.com/[email protected]/dist/react-dom.min.js:12:22496)
    at f (https://unpkg.com/[email protected]/dist/react-dom.min.js:12:18835)
    at m (https://unpkg.com/[email protected]/dist/react-dom.min.js:12:18961)
    at Array.forEach (native)
    at r (https://unpkg.com/[email protected]/dist/react-dom.min.js:15:12116)
    at Object.processEventQueue (https://unpkg.com/[email protected]/dist/react-dom.min.js:12:20039)

I am using the following versions:

>>> dash.__version__
'0.17.7'
>>> dcc.__version__
'0.5.3'
>>>

[chriddyp]

Confirmed. Thanks for reporting! Working on a fix now.

[chriddyp]

Should also make it possible for the x to be removed...

[chriddyp]

Fixed in https://github.com/plotly/dash-core-components/pull/38

[chriddyp]

Upgrade with

$ pip install dash-core-components==0.7.0

[chriddyp]

Let me know if that works for you :) Thanks again for reporting!

[thomasantony]

It's working. Thanks for the quick response! 👍