From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 18 Nov 2022 17:45:45 +0000 (+0100)
Subject: Remove the dialog from the DOM after it has been closed
X-Git-Tag: 6.0.0_Alpha_1~694
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a813abc9e076ad591ddcabdfe7d2da4146065099;p=GitHub%2FWoltLab%2FWCF.git

Remove the dialog from the DOM after it has been closed
---

diff --git a/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts b/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts
index 1e439355d8..c72267e778 100644
--- a/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts
+++ b/ts/WoltLabSuite/Core/Element/woltlab-core-dialog.ts
@@ -57,11 +57,11 @@ export class WoltlabCoreDialogElement extends HTMLElement {
 
     this.#title.textContent = title;
 
-    if (this.#dialog.parentElement === null) {
-      if (dialogContainer.parentElement === null) {
-        document.getElementById("content")!.append(dialogContainer);
-      }
+    if (dialogContainer.parentElement === null) {
+      document.getElementById("content")!.append(dialogContainer);
+    }
 
+    if (this.parentElement !== dialogContainer) {
       dialogContainer.append(this);
     }
 
@@ -79,6 +79,13 @@ export class WoltlabCoreDialogElement extends HTMLElement {
 
     releasePageOverlayContainer(this.#dialog);
     scrollEnable();
+
+    // Remove the dialog from the DOM, preventing it from
+    // causing any collisions caused by elements with IDs
+    // contained inside it. Will also cause the DOM element
+    // to be garbage collected when there are no more
+    // references to it.
+    this.remove();
   }
 
   get dialog(): HTMLDialogElement {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js
index e8a54ce83e..1ac3615fe5 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Element/woltlab-core-dialog.js
@@ -32,10 +32,10 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Helper/PageOverlay", "
                 throw new Error("Cannot open the modal dialog without a title.");
             }
             this.#title.textContent = title;
-            if (this.#dialog.parentElement === null) {
-                if (dialogContainer.parentElement === null) {
-                    document.getElementById("content").append(dialogContainer);
-                }
+            if (dialogContainer.parentElement === null) {
+                document.getElementById("content").append(dialogContainer);
+            }
+            if (this.parentElement !== dialogContainer) {
                 dialogContainer.append(this);
             }
             this.#dialog.showModal();
@@ -48,6 +48,12 @@ define(["require", "exports", "tslib", "../Dom/Util", "../Helper/PageOverlay", "
             this.dispatchEvent(event);
             (0, PageOverlay_1.releasePageOverlayContainer)(this.#dialog);
             (0, Screen_1.scrollEnable)();
+            // Remove the dialog from the DOM, preventing it from
+            // causing any collisions caused by elements with IDs
+            // contained inside it. Will also cause the DOM element
+            // to be garbage collected when there are no more
+            // references to it.
+            this.remove();
         }
         get dialog() {
             return this.#dialog;