Components as props in `dmc.Notification` not working correctly

[AnnMarieW]

This issue was initially reported in the Dash GitHub https://github.com/plotly/dash/issues/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
import dash_mantine_components as dmc

app = Dash(__name__, suppress_callback_exceptions=True)

app.layout = dmc.NotificationsProvider(
    html.Div(
        [
            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=f"{n_clicks=}",
        icon=dmc.Button("click me", id="button"),
    )

@callback(
    Output("container", "children"),
    Input("button", "n_clicks")
)
def update(n):
    print("button n_clicks:", n)
    return dash.no_update

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