In case you need more information:
app.layout = html.Div([
html.Div(dcc.Tabs(id=‘tabDiv’, value=‘DA’, children=[
dcc.Tab(label=‘DA’, value=‘DA’),
dcc.Tab(label=‘DP’, value=‘DP’),
dcc.Tab(label=‘DQ’, value=‘DQ’),
dcc.Tab(label=‘MG’, value=‘MG’)],
),
style={
‘margin-top’: ‘-20px’
}
),
html.Div(
[
dbc.Button(“Open modal”, id=“open”),
dbc.Modal(
[
dbc.ModalHeader(“Header”),
dbc.ModalBody(“This is the content of the modal”),
dbc.ModalFooter(
dbc.Button(“Close”, id=“close”, className=“ml-auto”)
),
],
id=“modal”,
),
],
html.Div(dcc.Dropdown(id=‘Variate’,
options=[{‘label’: ‘VA’, ‘value’: ‘VD’},
{‘label’: ‘UA’, ‘value’: ‘U’},
{‘label’: ‘MU’, ‘value’: ‘M’},
{‘label’: ‘TS’, ‘value’: ‘TS’}],
value=‘VD’,
clearable=False
),
id=‘VariateDiv’,
style={‘display’: ‘none’}),
])
That is what I have in my layout. A dcc.Tabs with four tab values, the dbc.Modal and a dropdown.
@app.callback(Output(‘VariateDiv’, ‘style’),
[Input(‘upload-data’, ‘filename’),
Input(‘upload-data’, ‘contents’),
Input(‘tabDiv’, ‘value’)])
def showDescriptiveAnalysisOptions(filename, contents, value):
if contents is None:
return dash.no_update
else:
df = parse_contents(contents, filename)
if df is not None:
if value == ‘DA’:
return {‘width’: ‘400px’}
else:
return {‘display’: ‘none’}
This callback is to show the dropdown only when the tab value is DA.
@app.callback(
Output(“modal”, “is_open”),
[Input(“open”, “n_clicks”), Input(“close”, “n_clicks”)],
[State(“modal”, “is_open”)],
)
def toggle_modal(n1, n2, is_open):
if n1 or n2:
return not is_open
return is_open
And this one is to open and close the modal button.
The problem comes that when I change the tab value, when the dropdown has ‘VD’ value, the dropdown doesn’t hide in the first attempt, but I have to click two times in the tab to hide the dropdown. This only happens to me when the dropdown value is in ‘VD’. I mean, if I change the tab value when the dropdown has another value, it goes well.
This happens since I enter the modal button. If the modal is not there it also goes well.
Please I need help quickly!
