fix: add data-slot-ignore attribute to auto-added components (#8250)

Author: tomivirkki

vaadin-confirm-dialog-flow-parent/vaadin-confirm-dialog-flow-integration-tests/src/main/java/com/vaadin/flow/component/confirmdialog/tests/ChildOverlayPage.java

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2000-2025 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.component.confirmdialog.tests;
+
+import com.vaadin.flow.component.button.Button;
+import com.vaadin.flow.component.confirmdialog.ConfirmDialog;
+import com.vaadin.flow.component.html.Div;
+import com.vaadin.flow.router.Route;
+
+@Route(value = "vaadin-confirm-dialog/child-overlay")
+public class ChildOverlayPage extends Div {
+    public ChildOverlayPage() {
+        ConfirmDialog dialog = new ConfirmDialog();
+        dialog.setId("parent-dialog");
+        dialog.setText("This is the parent dialog");
+
+        ConfirmDialog dialog2 = new ConfirmDialog();
+        dialog2.setText("This is a child dialog");
+        // Just so the issue is more visible
+        dialog2.getElement().executeJs("this.$.overlay.style.top='300px'");
+
+        Button openDialog = new Button("Open dialogs", e -> {
+            dialog.open();
+            dialog2.open();
+        });
+        openDialog.setId("open-dialogs");
+
+        add(new Div(openDialog));
+    }
+}

vaadin-confirm-dialog-flow-parent/vaadin-confirm-dialog-flow-integration-tests/src/test/java/com/vaadin/flow/component/confirmdialog/tests/ChildOverlayIT.java

@@ -0,0 +1,54 @@
+/*
+ * Copyright 2000-2025 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.flow.component.confirmdialog.tests;
+
+import org.junit.Assert;
+import org.junit.Before;
+import org.junit.Test;
+
+import com.vaadin.flow.component.button.testbench.ButtonElement;
+import com.vaadin.flow.component.confirmdialog.testbench.ConfirmDialogElement;
+import com.vaadin.flow.testutil.TestPath;
+import com.vaadin.testbench.TestBenchElement;
+import com.vaadin.tests.AbstractComponentIT;
+
+@TestPath("vaadin-confirm-dialog/child-overlay")
+public class ChildOverlayIT extends AbstractComponentIT {
+
+    private ButtonElement openDialogs;
+
+    @Before
+    public void init() {
+        open();
+
+        openDialogs = $(ButtonElement.class).id("open-dialogs");
+    }
+
+    @Test
+    public void openDialogs_parentDialogMessageIsVisible() {
+        openDialogs.click();
+        var parentDialogElement = $(ConfirmDialogElement.class)
+                .id("parent-dialog");
+        var messageElement = (TestBenchElement) executeScript(
+                "return arguments[0].querySelector(':scope > div')",
+                parentDialogElement);
+
+        Assert.assertEquals("This is the parent dialog",
+                messageElement.getText());
+        Assert.assertTrue(messageElement.isDisplayed());
+    }
+
+}

vaadin-flow-components-shared-parent/vaadin-flow-components-base/src/main/java/com/vaadin/flow/component/shared/internal/OverlayAutoAddController.java

@@ -84,6 +84,13 @@ public OverlayAutoAddController(C component,
     public void add() {
         if (!isAttached()) {
             UI ui = getUI();
+            // Mark component as slot-ignored if being added inside another
+            // modal. This prevents web component SlotController from treating
+            // auto-added overlays as custom content that should hide default
+            // slot content
+            if (ui.hasModalComponent()) {
+                component.getElement().setAttribute("data-slot-ignore", "");
+            }
             ui.addToModalComponent(component);
             ui.setChildComponentModal(component, modalityModeSupplier.get());
             autoAdded = true;
@@ -137,6 +144,7 @@ private void handleOpen() {
     private void handleClose() {
         if (autoAdded) {
             autoAdded = false;
+            component.getElement().removeAttribute("data-slot-ignore");
             component.getElement().removeFromParent();
         }
     }

vaadin-flow-components-shared-parent/vaadin-flow-components-base/src/test/java/com/vaadin/flow/component/shared/internal/OverlayAutoAddControllerTest.java

@@ -345,6 +345,76 @@ public void notAutoAdded_remove_doesNothing() {
                 component.getElement().getParent());
     }
 
+    @Test
+    public void open_insideModalComponent_dataSlotIgnoreAttributeSet() {
+        // Open a modal component first
+        TestComponent modal = new TestComponent(() -> ModalityMode.STRICT);
+        modal.setOpened(true);
+        fakeClientResponse();
+
+        // Open another component inside the modal
+        TestComponent innerComponent = new TestComponent();
+        innerComponent.setOpened(true);
+        fakeClientResponse();
+
+        // Verify the inner component has data-slot-ignore attribute
+        Assert.assertTrue(
+                innerComponent.getElement().hasAttribute("data-slot-ignore"));
+    }
+
+    @Test
+    public void open_notInsideModalComponent_dataSlotIgnoreAttributeNotSet() {
+        // Open a component without a modal parent
+        TestComponent component = new TestComponent();
+        component.setOpened(true);
+        fakeClientResponse();
+
+        // Verify the component does not have data-slot-ignore attribute
+        Assert.assertFalse(
+                component.getElement().hasAttribute("data-slot-ignore"));
+    }
+
+    @Test
+    public void open_insideModalComponent_close_dataSlotIgnoreAttributeRemoved() {
+        // Open a modal component first
+        TestComponent modal = new TestComponent(() -> ModalityMode.STRICT);
+        modal.setOpened(true);
+        fakeClientResponse();
+
+        // Open another component inside the modal
+        TestComponent innerComponent = new TestComponent();
+        innerComponent.setOpened(true);
+        fakeClientResponse();
+
+        // Verify the attribute is set
+        Assert.assertTrue(
+                innerComponent.getElement().hasAttribute("data-slot-ignore"));
+
+        // Close the component
+        innerComponent.setOpened(false);
+        fireClosedEvent(innerComponent);
+
+        // Verify the attribute is removed
+        Assert.assertFalse(
+                innerComponent.getElement().hasAttribute("data-slot-ignore"));
+    }
+
+    @Test
+    public void add_insideModalComponent_dataSlotIgnoreAttributeSet() {
+        // Open a modal component first
+        TestComponent modal = new TestComponent(() -> ModalityMode.STRICT);
+        modal.setOpened(true);
+        fakeClientResponse();
+
+        // Add another component using controller.add()
+        TestComponent innerComponent = new TestComponent();
+        innerComponent.controller.add();
+
+        // Verify the inner component has data-slot-ignore attribute
+        Assert.assertTrue(
+                innerComponent.getElement().hasAttribute("data-slot-ignore"));
+    }
+
     private void fakeClientResponse() {
         ui.getInternals().getStateTree().runExecutionsBeforeClientResponse();
         ui.getInternals().getStateTree().collectChanges(ignore -> {