Dropdown 'x' button throws error
See original GitHub issueThe 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/dash-core-components@0.5.3/dash_core_components/bundle.js:13:31574)
at Object.setValue (https://unpkg.com/dash-core-components@0.5.3/dash_core_components/bundle.js:11:11319)
at Object.clearValue (https://unpkg.com/dash-core-components@0.5.3/dash_core_components/bundle.js:11:12224)
at Object.r (https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js:14:5395)
at a (https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js:12:22306)
at Object.s [as executeDispatchesInOrder] (https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js:12:22496)
at f (https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js:12:18835)
at m (https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js:12:18961)
at Array.forEach (native)
at r (https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js:15:12116)
at Object.processEventQueue (https://unpkg.com/react-dom@15.4.2/dist/react-dom.min.js:12:20039)
I am using the following versions:
>>> dash.__version__
'0.17.7'
>>> dcc.__version__
'0.5.3'
>>>
Issue Analytics
- State:
- Created 6 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
javascript - Why does my dropdown button throw me this error?
when I try to activate my dropdown. It is contained within a nav list but the error started even before that when it...
Read more >Getting Started with Blazor DropDown List Component
NET 3.X app, open the ~/Startup.cs file and register the Syncfusion Blazor Service. .NET 6 (~/Program.cs) ...
Read more >Dropdown | Webflow University
A dropdown menu is a pre-built navigation element that can be added to almost any area of a site. Most often you'll see...
Read more >Components - Bootstrap
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
Read more >PowerApps set default value based on another field from a ...
Sometimes you want to set the default value of a field, a group of fields, or a form control based off the selected...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Let me know if that works for you 😃 Thanks again for reporting!
Confirmed. Thanks for reporting! Working on a fix now.