[Bug] Components as props in dmc.Notification not working correctly

[AnnMarieW]

This issue was initially reported in the Dash GitHub plotly/dash#2830, but it seems to be an issue only with the dmc.Notification component.

When using components as props, the component's onClick handler no longer works correctly. Note that in this example if you click on the dmc.Button inside the dmc.Notification multiple times the n_clicks remains at 1.

from dash import Dash, html, callback, Output, Input, dcc, dash, _dash_renderer
import dash_mantine_components as dmc
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL, suppress_callback_exceptions=True)

app.layout = dmc.MantineProvider(html.Div(
        [
            dmc.NotificationProvider(withinPortal=False),
            dmc.Text(children=dash.__version__),
            dmc.Button("Show Notification", id="notify"),
            html.Div(id="notifications-container"),
            html.Div(id="container"),
        ]
    ))



@callback(
    Output("notifications-container", "children"),
    Input("notify", "n_clicks"),
    prevent_initial_call=True,
)
def notify(n_clicks):
    return dmc.Notification(
        title="Notification",
        autoClose=False,
        id="simple-notify",
        action="show",
        message=dmc.Button("click me", id="button"),

    )


@callback(
    Output("container", "children"),
    Input("button", "n_clicks")
)
def update(n):
    return f"button clicked: {n}"


if __name__ == "__main__":
    app.run(debug=True)

[snehilvj]

Hi @AnnMarieW, you are writing a callback on a component passed as a property. Are callbacks supposed to work on them now?

[BSd3v]

Hello @snehilvj,

The callback is to demonstrate the issue with the setProps and trying to increase the n_clicks value of the individual component.

I'm not sure if notifications are setup this way, I think if this was to work, would the notification need to be rerendered?

The component triggers a rerender in itself, but because the prop value doesn't increase, a new test for n_clicks in the clipboard fails.

[AnnMarieW]

Hi @snehilvj

If you take a look at the examples in the issue in the Dash repo, you can see what was originally reported is that the dcc.Clipboard stopped working with dmc.Notification.

It looked like it was an issue with dcc.Clipboard but that component works with other Dash components when the component is used as a prop. The problem seems to be that the n_clicks is no longer updated when components are used with dmc.Notification

[AnnMarieW]

I haven't been able to figure out the root cause of this bug. I suspect it might have something to do with how the refs are handled and it might be an issue in the Dash library. If anyone has any ideas, I could use the help because this one has me stumped.