dmc.NotificationContainer callback with both clear and sendNotifications

[yinchi]

Is it possible to clear a set of notifications and show new notifications in the same dash callback? If not, what is a good workaround? (I'm currently testing the display of notifications for validation errors when submitting a form.)

[AnnMarieW]

Here's an example of showing new notifications and clearing notifications in the same callback: https://www.dash-mantine-components.com/components/notification#clean-and-cleanqueue

[yinchi]

I see a callback that clears existing notifications (connected to the Clean All button), and one for adding new notifications (Show 10 notifications), but not a single callback that can replace existing notifications with a new batch.

Basically, I want "Clean all" and "Show 10 notifications" in a single click.

[AnnMarieW]

You might try using set_props with a delay between each one https://dash.plotly.com/advanced-callbacks#setting-properties-directly

Not sure if this is a best practice though.

[AnnMarieW]

Another good way to notify users about errors on forms is to use the error prop on input fields. There is an example of that in this issue - it might be easier than using Notifications
#623 (comment)

[AnnMarieW]

what do you mean by main element? You mean the input field?

[yinchi]

Yes -- normally we would have a stack of a title (optional), description (optional), the input field itself, and the error message (again, optional), so how might we align this in a visually appealing way?

[AnnMarieW]

Ar you using the label and description props in the component? Or are you adding these elements yourself using the Stack component?

[yinchi]

As an example:

input1 = dmc.TextInput(
	placeholder="Given Name(s)",
	label="Given Name(s)",
	description="Enter your given names",
	required=True,
)
input2 = dmc.TextInput(
	placeholder="Surname",
	error="Here is an error message",
	required=True,
)

How would we align input1 and input2 in a dmc.Group, so that the text boxes line up?

[AnnMarieW]

You can put the inputs in a dmc.Group(align="flex-end") which aligns the bottom of the elements.

Then the issue is the error field is optional. You can handle that by using the Styles API to make the error position absolute: https://help.mantine.dev/q/align-input-button

import dash_mantine_components as dmc
from dash import Dash

app = Dash()

styles = {
    "root": {"position": "relative"},
    "error": {
        "position": "absolute",
        "bottom": "rem(-18px)",
    },
    "wrapper": {"marginBottom": 0},
}

component = dmc.Group(
    [
        dmc.TextInput(
            placeholder="Given Name(s)",
            label="Given Name(s)",
            description="Enter your given names",
            required=True,
            style=styles
        ),
        dmc.TextInput(
            placeholder="Surname",
            error="Here is an error message",
            required=True,
            styles=styles
        ),
    ],
    align="flex-end",
)


app.layout = dmc.MantineProvider(component)

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