Notification after ConfirmDialog causes dialog message to disappear

[MichaelPluessErni]

Description

When a Notification is created directly after opening an ConfirmDialog then the message in the ConfirmDialog is not visible. More precisely, it is not even added correctly to the dialog.

Interestingly, if the order is reversed and the Notification is created first, this bug does not appear.

Possibly this is related to how the message properties are handled in the LitTemplates.

Expected outcome

Both components should display their message texts without interference.

Minimal reproducible example

		ConfirmDialog appConfirmDialog = new ConfirmDialog();
		appConfirmDialog.setText("message");
		appConfirmDialog.open();

		Notification notification = new Notification();
		notification.add("Example notification");
		notification.setOpened(true);

Steps to reproduce

1. Add snippet above to a view
2. Notice that message is not visible in the dialog

Environment

Flow: 24.3.3 Vaadin: 24.3.3 Java: Oracle Corporation 17 OS: amd64 Windows 10 10.0 Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Live reload: Java unavailable (JRebel): Front end active Spring Boot: 3.2.2

Browsers

Chrome

[tomivirkki]

Confirmed the bug, here's the outcome with the provided snippet:

Interestingly, it works as expected if you add add(appConfirmDialog) to the view

[MichaelPluessErni]

@tomivirkki I suspect this has to do with the shadow dom and how the properties are propagated. Elements that are added to slots in LitElements are placed outside of the shadow dom and might thus get into conflict with one another. Maybe, when the dialog is explicitly added to the view, it is placed into its shadow dom, whereas the notification is placed outside of it and no conflict exists. However, this attempt at an explanation does not explain why it works when the notification is opened before the dialog.

[knoobie]

I've got a feeling it's related to the server side modality.. there was something similar with the normal dialog in the past if I remember correctly

[DiegoCardoso]

I've got a feeling it's related to the server side modality.. there was something similar with the normal dialog in the past if I remember correctly

I believe you're right. When the Notification opens, it is added as a child component of the opened ConfirmDialog, by the server-side modality logic.

Then the issue comes due to ConfirmDialog accepting either a message string or any number of child components. When there's a child element, the message is not used, which is the case here (the Notification as a child of the ConfirmDialog).

[DiegoCardoso]

As a workaround, you can add the text message wrapped in a Div component:

appConfirmDialog.add(new Div("message"));