DMC Modal has a dark screen when closed and won't allow any interaction with the app

Dash Python
1

I have the following code that uses the Dash Mantine Component Modal:

dmc.Modal(

                                    title="Snapshot",

                                    id="modal-simple",

                                    zIndex=10000,

                                    children=\[

                                        html.Div(

                                            dcc.Textarea(id='snap-comment',style={'width': '70%', 'height': 100}),

                                        ),

                                        html.Span(id='take-snapshot-status', style={'paddingRight': 10}),

                                        dmc.Space(h=20),

                                        dmc.Group(

                                            \[

                                                dmc.Button("Take Snapshot", id="take-snapshot"),

                                                dmc.Button(

                                                    "Close",

                                                    color="red",

                                                    variant="outline",

                                                    id="modal-close-button",

                                                ),

                                            \],

                                            align="right",

                                        ),

                                    \],

                                )

and the following callback for it:

@app.callback(

Output("modal-simple", "opened"),

Input("snap-modal-button", "n_clicks"),

Input("modal-close-button", "n_clicks"),

Input("take-snapshot", "n_clicks"),

State("modal-simple", "opened"),

prevent_initial_call=True,

)

def modal_demo(nc1, nc2, nc3, opened):

return not opened

This has been working for me for months and all of a sudden when I open the modal and close it, the backdrop that comes up when opened becomes darker and stays until the app is refreshed. Any recommendations to fix this would be greatly appreciated.

2

Hi @hrose33

What version of dmc and dash are you running?

Have any dependencies or CSS files changed recently?

I can’t see any problems with what you posted. Can you please include a complete minimal example that reproduces the issue?

3

here is a snippet of the requirements:

dash==2.18.2

dash-bootstrap-components==1.0.0

dash-core-components==2.0.0

dash-design-kit==2.0.0

dash-enterprise-auth==0.2.5

dash-html-components==2.0.0

dash-mantine-components==0.13.0a3

dash-renderer==1.9.0

dash-snapshots>=2.2.0

No dependencies or CSS changes have happened, this came out of nowhere and I cannot seem to fix it.

I am not sure what else to include since my app is rather large, and this is the only things related to that modal. I am going to try to build the modal using a different library (dbc) and see if that resolves the issue.

4

Since you are using Dash Enterprise, have you asked your Plotly support team?

I’m the lead maintainer of DMC and would be happy to help them with any specifics regarding DMC in your project.

5

hi @hrose33
As @AnnMarieW mentioned, for open source questions definitely use this forum. However, if you’d like our Dash Enterprise team to help you out, you can use this email address: onpremise.support@plot.ly

6

It seems when I upgraded from python 3.8 to 3.12 this error occurred, and I fixed it by updating DMC to 2.1.