destroy entire dialog when closed

routes/_components/dialog/ComposeDialog.html

@@ -1,4 +1,11 @@
-<ModalDialog :label :shown :closed :title background="var(--main-bg)">
+<ModalDialog
+  :label
+  :shown
+  :closed
+  :title
+  background="var(--main-bg)"
+  on:destroyDialog="destroy()"
+>
   <ComposeBox realm="dialog" size="slim" autoFocus="true" on:postedStatus="onPostedStatus()" />
 </ModalDialog>
 <script>

routes/_components/dialog/ConfirmationDialog.html

@@ -1,4 +1,10 @@
-<ModalDialog :label :shown :closed background="var(--main-bg)" on:close="onClose()">
+<ModalDialog
+  :label
+  :shown
+  :closed background="var(--main-bg)"
+  on:close="onClose()"
+  on:destroyDialog="destroy()"
+>
   <form class="confirmation-dialog-form">
     <p>
       {{text}}

routes/_components/dialog/EmojiDialog.html

@@ -1,4 +1,11 @@
-<ModalDialog :label :shown :closed :title background="var(--main-bg)">
+<ModalDialog
+  :label
+  :shown
+  :closed
+  :title
+  background="var(--main-bg)"
+  on:destroyDialog="destroy()"
+>
   <div class="custom-emoji-container">
     {{#if emojis.length}}
       <ul class="custom-emoji-list">

routes/_components/dialog/ImageDialog.html

@@ -3,6 +3,7 @@
              background="var(--muted-modal-bg)"
              muted="true"
              className="image-modal-dialog"
+             on:destroyDialog="destroy()"
 >
   {{#if type === 'gifv'}}
     <AutoplayVideo

routes/_components/dialog/ModalDialog.html

@@ -148,8 +148,9 @@
       a11yDialog.on('hide', () => {
         a11yDialog.destroy()
         this.fire('close')
-        this.destroy()
+        console.log('destroyDialog()')
-        document.body.removeChild(dialogElement)
+        this.fire('destroyDialog')
+        requestAnimationFrame(() => document.body.removeChild(dialogElement))
       })
       this.observe('shown', shown => {
         if (shown) {

routes/_components/dialog/PostPrivacyDialog.html

@@ -1,4 +1,11 @@
-<ModalDialog :label :shown :closed :title background="var(--main-bg)">
+<ModalDialog
+  :label
+  :shown
+  :closed
+  :title
+  background="var(--main-bg)"
+  on:destroyDialog="destroy()"
+>
   <GenericDialogList :items on:click="onClick(event)" />
 </ModalDialog>
 <script>

routes/_components/dialog/StatusOptionsDialog.html

@@ -1,4 +1,11 @@
-<ModalDialog :label :shown :closed :title background="var(--main-bg)">
+<ModalDialog
+  :label
+  :shown
+  :closed
+  :title
+  background="var(--main-bg)"
+  on:destroyDialog="destroy()"
+>
   <GenericDialogList :items on:click="onClick(event)"/>
 </ModalDialog>
 <script>

routes/_components/dialog/VideoDialog.html

@@ -1,8 +1,10 @@
-<ModalDialog :label
+<ModalDialog
-             :shown
+  :label
-             background="var(--muted-modal-bg)"
+  :shown
-             muted="true"
+  background="var(--muted-modal-bg)"
-             className="video-modal-dialog"
+  muted="true"
+  className="video-modal-dialog"
+  on:destroyDialog="destroy()"
 >
   <video poster="{{poster}}"
          src="{{src}}"