question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dropdown 'x' button throws error

See original GitHub issue

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. dropdown-button

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:closed
  • Created 6 years ago
  • Comments:6 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
chriddypcommented, Jul 21, 2017

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

1reaction
chriddypcommented, Jul 21, 2017

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found