feat: add addClosedListener to Dialog (#7794)

sissbruecker · web-flow · commit 702f6f671003 · 2025-08-04T15:23:44.000+02:00
diff --git a/vaadin-dialog-flow-parent/vaadin-dialog-flow/src/main/java/com/vaadin/flow/component/dialog/Dialog.java b/vaadin-dialog-flow-parent/vaadin-dialog-flow/src/main/java/com/vaadin/flow/component/dialog/Dialog.java
@@ -286,8 +286,12 @@ public String getTop() {
     }
 
     /**
-     * {@code opened-changed} event is sent when the overlay opened state
-     * changes.
+     * Event that is fired when the dialog's opened state changes.
+     * <p>
+     * Note that this event fires immediately when the opened property changes,
+     * which, when closing the dialog, is before the closing animation has
+     * finished. To wait for the animation to finish, listen for the
+     * {@link ClosedEvent} event.
      */
     public static class OpenedChangeEvent extends ComponentEvent<Dialog> {
         private final boolean opened;
@@ -302,6 +306,17 @@ public boolean isOpened() {
         }
     }
 
+    /**
+     * Event that is fired after the dialog's closing animation has finished.
+     * Can be used to remove a dialog from the UI afterward.
+     */
+    @DomEvent("closed")
+    public static class ClosedEvent extends ComponentEvent<Dialog> {
+        public ClosedEvent(Dialog source, boolean fromClient) {
+            super(source, fromClient);
+        }
+    }
+
     @Override
     public void setWidth(String value) {
         getElement().setProperty("width", value);
@@ -969,7 +984,12 @@ private void setModality(boolean modal) {
     }
 
     /**
-     * Add a lister for event fired by the {@code opened-changed} events.
+     * Add a listener for when the dialog's opened state changes.
+     * <p>
+     * Note that this event fires immediately when the opened property changes,
+     * which, when closing the dialog, is before the closing animation has
+     * finished. To wait for the animation to finish, use
+     * {@link #addClosedListener(ComponentEventListener)}.
      *
      * @param listener
      *            the listener to add
@@ -980,6 +1000,19 @@ public Registration addOpenedChangeListener(
         return addListener(OpenedChangeEvent.class, listener);
     }
 
+    /**
+     * Add a lister for when the dialog's closing animation has finished. Can be
+     * used to remove the dialog from the UI afterward.
+     *
+     * @param listener
+     *            the listener to add
+     * @return a Registration for removing the event listener
+     */
+    public Registration addClosedListener(
+            ComponentEventListener<ClosedEvent> listener) {
+        return addListener(ClosedEvent.class, listener);
+    }
+
     /**
      * {@inheritDoc}
      * <p>
@@ -996,8 +1029,8 @@ public Registration addAttachListener(
      * {@inheritDoc}
      * <p>
      * Note: To listen for closing the dialog, you should use
-     * {@link #addOpenedChangeListener(ComponentEventListener)}, as the
-     * component is not necessarily removed from the DOM when closing.
+     * {@link #addClosedListener(ComponentEventListener)}, as the component is
+     * not necessarily removed from the DOM when closing.
      */
     @Override
     public Registration addDetachListener(
diff --git a/vaadin-dialog-flow-parent/vaadin-dialog-flow/src/test/java/com/vaadin/flow/component/dialog/DialogTest.java b/vaadin-dialog-flow-parent/vaadin-dialog-flow/src/test/java/com/vaadin/flow/component/dialog/DialogTest.java
@@ -26,6 +26,7 @@
 import org.mockito.Mockito;
 
 import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.ComponentEventListener;
 import com.vaadin.flow.component.ComponentUtil;
 import com.vaadin.flow.component.HasStyle;
 import com.vaadin.flow.component.Key;
@@ -34,8 +35,13 @@
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Span;
 import com.vaadin.flow.component.internal.PendingJavaScriptInvocation;
+import com.vaadin.flow.dom.DomEvent;
+import com.vaadin.flow.dom.Element;
+import com.vaadin.flow.internal.nodefeature.ElementListenerMap;
 import com.vaadin.flow.server.VaadinSession;
 
+import elemental.json.Json;
+
 /**
  * Unit tests for the Dialog.
  */
@@ -420,6 +426,23 @@ public void position_setTopLeft_positionIsDefined() {
         Assert.assertEquals("20px", dialog.getLeft());
     }
 
+    @SuppressWarnings("unchecked")
+    @Test
+    public void addClosedListener_listenerInvokedOnClose() {
+        Dialog dialog = new Dialog();
+        ComponentEventListener<Dialog.ClosedEvent> listener = Mockito
+                .mock(ComponentEventListener.class);
+        dialog.addClosedListener(listener);
+
+        Element element = dialog.getElement();
+        dialog.getElement().getNode().getFeature(ElementListenerMap.class)
+                .fireEvent(
+                        new DomEvent(element, "closed", Json.createObject()));
+
+        Mockito.verify(listener, Mockito.times(1))
+                .onComponentEvent(Mockito.any(Dialog.ClosedEvent.class));
+    }
+
     private void fakeClientResponse() {
         ui.getInternals().getStateTree().runExecutionsBeforeClientResponse();
         ui.getInternals().getStateTree().collectChanges(ignore -> {
