DropDown update

Dash Python
#1

I have a problem with the following code where the dropdwon doesn show the selected item after I click on the items. I get some items from SQL Db and it shows on the DropDown items, however, when I click on this items they dont appear as the value of the DropDown . Can anyone help me find the problem there.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, Event
import Query
app = dash.Dash()

colors = {
‘background’: ‘#7FDBFF’,
‘text’: ‘1111111’
}
obj=Query.CI()

app.layout = html.Div([
html.H1(style={‘backgroundColor’: colors[‘background’]},children=“test”),

html.Div( style={
    'textAlign': 'center',
    'color': colors['text']
},children='''
    List of industries:
'''),
html.Label('Enter nmi or industry name'),

dcc.Input(id='my-id'),
dcc.Dropdown(id='comp-id', multi=False),

html.Button('Submit!', id='my-button'),
html.Div(id='my-div')

])

@app.callback(
Output(component_id=‘comp-id’, component_property=‘options’),
[Input(‘my-button’, ‘n_clicks’)],
state=[State(component_id=‘my-id’, component_property=‘value’)]
)
def update_output_div(n_clicks, input_value):
data = obj.get_companies_nmi(input_value)
return [{‘label’: i, ‘value’: i} for i in data]

@app.callback(
Output(component_id=‘my-div’, component_property=‘children’),
[Input(‘comp-id’, ‘value’)]
)
def update_output_div(input_value):

return str(input_value)

if name == ‘main’:
app.run_server(host= ‘0.0.0.0’,debug = False)

#2

I’m not exactly sure by what you mean by not appearing as the value of the Dropdown. I can’t see anything jumping out as being a problem. Here’s a modified version of your code with some dummy labels. It seems to work as I think it’s meant to.

Does it behave how you expect?

Note that you might want an initial value for the Input component if you don’t want the initial callback on pageload to receive a value of None

import dash                                    
import dash_core_components as dcc             
import dash_html_components as html            
from dash.dependencies import Input, Output, State, Event                                      


app = dash.Dash()                              
colors = {                                     
    'background': '#7FDBFF',                   
    'text': '1111111'                          
}                                              

app.layout = html.Div([                        
    html.H1(style={'backgroundColor': colors['background']}, children='test'),                                                                                                                 
    html.Div("List of industries:", style={    
        'textAlign': 'center',
        'color': colors['text']
    }),
    html.Label('Enter nmi or industry name'),
    dcc.Input(id='my-id', value='5'),
    dcc.Dropdown(id='comp-id', multi=False),
    html.Button('Submit!', id='my-button'),
    html.Div(id='my-div')
])

@app.callback(
Output('comp-id', 'options'), [Input('my-button', 'n_clicks')], [State('my-id', 'value')])
def update_output_div(n_clicks, input_value):
    return [{'label': str(i), 'value': str(i)} for i in range(int(input_value))]

@app.callback(
Output('my-div', 'children'), [Input('comp-id', 'value')])
def update_output_div(input_value):
    return input_value

if __name__ == '__main__':
    app.run_server(host='0.0.0.0', debug = False)
#3

Hi Ned

Thanks for your reply. Your code works fine. The problem with my code is that I have to get a list after clicking the submit button which updates the list of dropdown. That part works fine and I see the list of dropdown, however, after I click on any item of the dropdown this item dosnt appear as the value of the dropdown or it doesnt come on top of the dropdown to show what item is selected. In this case after clicking on items the dropdowm still shows empty space. I hope I could make it more clear to you. I added the second callback function to make sure that the value of the dropdown gets updated after each click and it does but I dont know why this value isnt being shown in dropdown.

I appreciate your help.

#4

@nedned I have a similar problem - when dropdown length exceeds 9 values - the last entries are unpickable and scroll to the bottom become erratic/impossible.

Is this a bug?

Python 3.5.2
Flask 1.0.2
dcc 0.22.1

#5

I have the same problem: gets stuck at the 5th value instead. Anyone knows something?

EDIT: Link to my issue. My issue was solved (the value in options needs to be unique): Dropdown menu update/scroll bug?

1 Like