Is there any problem/bug with dbc.Modal in dash?

Dash Python
#1

Hi, I wanna know if there is any bug related to the dbc.Modal in Dash. The problem is that I am developing a dashboard, in which I have different Tabs. I wanna enter a modal to write some instructions of usage. That modal should appear only in one tab value. The problem is that when I enter the modal, when I change the Tab value, there are some parts of the application that doesn’t render correctly, and I have to click two times in the tab in order to refresh all the parts.

Anyone knows why this happens? If nobody knows, is there any other form of showing some instructions inside the dashboard in a beautiful styled way, instead of doing it with a modal?

Thanks

#2

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!