fix: fix some dialog state issues (#1203)

* fix: fix some dialog state issues

fixes #1202

* fix console logs

src/routes/_components/dialog/components/CopyDialog.html

@@ -4,6 +4,7 @@
   {title}
   shrinkWidthToFit={true}
   background="var(--main-bg)"
+  on:show="onShow()"
 >
   <form class="copy-dialog-form">
     <input value={text}
@@ -47,13 +48,6 @@
   export default {
     oncreate () {
       onCreateDialog.call(this)
-      let { text } = this.get()
-      let { input } = this.refs
-      // double raf is to work around a11y-dialog trying to set the input
-      doubleRAF(() => {
-        input.focus()
-        input.setSelectionRange(0, text.length)
-      })
     },
     methods: {
       show,
@@ -63,6 +57,15 @@
         copyFromInput(input)
         toast.say('Copied to clipboard')
         this.close()
+      },
+      onShow () {
+        let { text } = this.get()
+        let { input } = this.refs
+        // double raf is to work around a11y-dialog trying to set the input
+        doubleRAF(() => {
+          input.focus()
+          input.setSelectionRange(0, text.length)
+        })
       }
     },
     data: () => ({

src/routes/_components/dialog/components/EmojiDialog.html

@@ -4,6 +4,7 @@
   {title}
   shrinkWidthToFit={true}
   background="var(--main-bg)"
+  on:show="onShow()"
 >
   <div class="emoji-container" {style} ref:container >
     {#if loaded}
@@ -104,7 +105,6 @@
           define({ 'emoji-mart': Picker })
         }
         this.set({ loaded: true })
-        this.focusIfNecessary()
       } catch (error) {
         this.set({ error }) // should never happen, but you never know
       }
@@ -168,6 +168,9 @@
         insertEmoji(realm, emoji)
         this.close()
       },
+      onShow () {
+        this.focusIfNecessary()
+      },
       focusIfNecessary () {
         let { autoFocus } = this.get()
         if (!autoFocus) {

src/routes/_components/dialog/components/MediaDialog.html

@@ -4,6 +4,7 @@
   background="var(--muted-modal-bg)"
   muted="true"
   className="media-modal-dialog"
+  on:show="onShow()"
 >
   <div class="media-container">
     <ul class="media-scroll" ref:scroller>
@@ -199,24 +200,12 @@
   import debounce from 'lodash-es/debounce'
   import times from 'lodash-es/times'
   import { smoothScroll, hasNativeSmoothScroll } from '../../../_utils/smoothScroll'
-  import { doubleRAF } from '../../../_utils/doubleRAF'
   import { store } from '../../../_store/store'
 
   export default {
     oncreate () {
       onCreateDialog.call(this)
-
       this.onScroll = debounce(this.onScroll.bind(this), 50, { leading: false, trailing: true })
-
-      let { scrolledItem } = this.get()
-      if (scrolledItem) {
-        doubleRAF(() => {
-          this.scrollToItem(scrolledItem, false)
-          this.setupScroll()
-        })
-      } else {
-        this.setupScroll()
-      }
     },
     ondestroy () {
       this.teardownScroll()
@@ -287,6 +276,17 @@
           this.scrollToItem(scrolledItem - 1, true)
         }
       },
+      onShow () {
+        let { scrolledItem } = this.get()
+        if (scrolledItem) {
+          requestAnimationFrame(() => {
+            this.scrollToItem(scrolledItem, false)
+            this.setupScroll()
+          })
+        } else {
+          this.setupScroll()
+        }
+      },
       scrollToItem (scrolledItem, smooth) {
         this.set({ scrolledItem: scrolledItem })
         let { length } = this.get()
@@ -302,6 +302,7 @@
             smoothScroll(scroller, scrollLeft, true)
           }
         } else {
+          console.log('setting scrollLeft', scrollLeft)
           scroller.scrollLeft = scrollLeft
         }
       },

src/routes/_components/dialog/components/ModalDialog.html

@@ -227,6 +227,7 @@
             document.body.classList.toggle('modal-open', true)
             this._a11yDialog.show()
             this.set({ fadedIn: true })
+            this.fire('show')
           })
         })
       },

src/routes/_components/dialog/components/ReportDialog.html

@@ -147,7 +147,7 @@
 
   export default {
     async oncreate () {
-      onCreateDialog.apply(this)
+      onCreateDialog.call(this)
       let { account, status, reportMap } = this.get()
       if (status) {
         reportMap[status.id] = true