fix: do not delay auto-adding Popover by beforeClientResponse (#7563)

* fix: reattach auto-added Popover

If a popover tries to auto-add itself when another modal element is
opened, it may end up being added as a child of said element. That can
be problematic in case the target element is not part of the parent
modal element and, when the modal is closed, the popover instance is
removed with its parent and interacting with the target element won't
work as expected.

This fix adds a detach listener to popover and tries to reattach it in
case of:
- the popover instance has been auto-added
- the target element is present
- the target element is still attached to the page

Fixes #7505

* test: add a test scenario for the use-case being fixed

* refactor: auto-add popover to target parent

* test: wait for dialog element to be removed

---------

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>

Author: DiegoCardoso

vaadin-popover-flow-parent/vaadin-popover-flow-integration-tests/pom.xml

@@ -49,6 +49,11 @@
             <groupId>com.vaadin</groupId>
             <artifactId>vaadin-dev-server</artifactId>
         </dependency>
+        <dependency>
+            <groupId>com.vaadin</groupId>
+            <artifactId>vaadin-dialog-flow</artifactId>
+            <version>${project.version}</version>
+        </dependency>
         <dependency>
             <groupId>com.vaadin</groupId>
             <artifactId>vaadin-flow-components-test-util</artifactId>

vaadin-popover-flow-parent/vaadin-popover-flow-integration-tests/src/main/java/com/vaadin/flow/component/popover/tests/PopoverView.java

@@ -15,6 +15,7 @@
  */
 package com.vaadin.flow.component.popover.tests;
 
+import com.vaadin.flow.component.dialog.Dialog;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.NativeButton;
 import com.vaadin.flow.component.popover.Popover;
@@ -54,7 +55,22 @@ public PopoverView() {
                 event -> popover.setCloseOnOutsideClick(false));
         disableCloseOnOutsideClick.setId("disable-close-on-outside-click");
 
+        NativeButton openDialog = new NativeButton("Open dialog and set target",
+                event -> {
+                    var dialog = new Dialog();
+                    var close = new NativeButton("Close", e -> dialog.close());
+                    close.setId("close-dialog");
+                    dialog.add(close);
+                    dialog.open();
+                    popover.setTarget(target);
+                });
+        openDialog.setId("open-dialog");
+
+        NativeButton removePopover = new NativeButton("Remove popover",
+                event -> remove(popover));
+        removePopover.setId("remove-popover");
+
         add(popover, clearTarget, detachTarget, attachTarget, disableCloseOnEsc,
-                disableCloseOnOutsideClick, target);
+                disableCloseOnOutsideClick, removePopover, openDialog, target);
     }
 }

vaadin-popover-flow-parent/vaadin-popover-flow-integration-tests/src/test/java/com/vaadin/flow/component/popover/tests/PopoverIT.java

@@ -135,6 +135,22 @@ public void disableCloseOnEsc_pressEsc_popoverDoesNotClose() {
         Assert.assertTrue(popover.isOpen());
     }
 
+    @Test
+    public void openDialogAndSetTarget_closeDialog_popoverOpens() {
+        // Clear the target and remove the popover first to ensure the popover
+        // is auto-added when the dialog opens
+        clickElementWithJs("clear-target");
+        clickElementWithJs("remove-popover");
+
+        clickElementWithJs("open-dialog");
+        clickElementWithJs("close-dialog");
+
+        waitForElementNotPresent(By.tagName("vaadin-dialog-overlay"));
+
+        clickTarget();
+        checkPopoverIsOpened();
+    }
+
     private void clickTarget() {
         clickElementWithJs("popover-target");
     }

vaadin-popover-flow-parent/vaadin-popover-flow/src/main/java/com/vaadin/flow/component/popover/Popover.java

@@ -696,10 +696,7 @@ public void setTarget(Component target) {
             targetDetachRegistration.remove();
         }
 
-        if (autoAddedToTheUi) {
-            getElement().removeFromParent();
-            autoAddedToTheUi = false;
-        }
+        removeFromUiIfAutoAdded();
 
         this.target = target;
 
@@ -710,27 +707,31 @@ public void setTarget(Component target) {
 
         // Target's JavaScript needs to be executed on each attach,
         // because Flow creates a new client-side element
-        target.getUI().ifPresent(this::onTargetAttach);
+        if (target.getUI().isPresent()) {
+            onTargetAttach();
+        }
         targetAttachRegistration = target
-                .addAttachListener(e -> onTargetAttach(e.getUI()));
+                .addAttachListener(e -> onTargetAttach());
         targetDetachRegistration = target.addDetachListener(e -> {
-            if (autoAddedToTheUi) {
-                getElement().removeFromParent();
-                autoAddedToTheUi = false;
-            }
+            removeFromUiIfAutoAdded();
         });
     }
 
-    private void onTargetAttach(UI ui) {
+    private void removeFromUiIfAutoAdded() {
+        if (autoAddedToTheUi) {
+            autoAddedToTheUi = false;
+            getElement().removeFromParent();
+        }
+    }
+
+    private void onTargetAttach() {
         if (target != null) {
-            ui.beforeClientResponse(ui, context -> {
-                if (getElement().getNode().getParent() == null) {
-                    // Remove the popover from its current state tree
-                    getElement().removeFromTree(false);
-                    ui.addToModalComponent(this);
-                    autoAddedToTheUi = true;
-                }
-            });
+            if (getElement().getNode().getParent() == null) {
+                // Remove the popover from its current state tree
+                getElement().removeFromTree(false);
+                target.getElement().getParent().appendChild(getElement());
+                autoAddedToTheUi = true;
+            }
             getElement().executeJs("this.target = $0", target.getElement());
         }
     }