fix: fix event propagation for click delegates (#1317)

fixes #1316

src/routes/_components/status/Media.html

@@ -146,10 +146,13 @@
       type: ({ media }) => media.type
     },
     methods: {
-      async onClick () {
-        let { mediaAttachments, index } = this.get()
-        let showMediaDialog = await importShowMediaDialog()
-        showMediaDialog(mediaAttachments, index)
+      onClick () {
+        (async () => {
+          let { mediaAttachments, index } = this.get()
+          let showMediaDialog = await importShowMediaDialog()
+          showMediaDialog(mediaAttachments, index)
+        })()
+        return true
       }
     },
     data: () => ({

src/routes/_components/status/Status.html

@@ -197,21 +197,20 @@
         let isClick = type === 'click'
         let isEnter = type === 'keydown' && keyCode === 13
         if (!isClick && !isEnter) {
-          return
+          return false
         }
         if (checkDomAncestors(target, isUserInputElement, isStatusArticle)) {
           // this element or any ancestors up to the status-article element is
           // a user input element
-          return
+          return false
         }
         if (checkDomAncestors(target, isToolbar, isStatusArticle)) {
           // this element or any of its ancestors is the toolbar
-          return
+          return false
         }
 
-        e.preventDefault()
-        e.stopPropagation()
         this.open()
+        return true
       },
       open () {
         let { originalStatusId } = this.get()

src/routes/_components/status/StatusMediaAttachments.html

@@ -190,6 +190,7 @@
         sensitivesShown[uuid] = !sensitivesShown[uuid]
         this.store.set({ sensitivesShown })
         this.fire('recalculateHeight')
+        return true
       }
     }
   }

src/routes/_components/status/StatusPoll.html

@@ -287,21 +287,22 @@
       )
     },
     methods: {
-      async onRefreshClick (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        let { pollId } = this.get()
-        this.set({ loading: true })
-        try {
-          let poll = await doAsyncActionWithDelay(() => getPoll(pollId))
-          if (poll) {
-            let { polls } = this.store.get()
-            polls[pollId] = poll
-            this.store.set({ polls })
+      onRefreshClick () {
+        (async () => {
+          let { pollId } = this.get()
+          this.set({ loading: true })
+          try {
+            let poll = await doAsyncActionWithDelay(() => getPoll(pollId))
+            if (poll) {
+              let { polls } = this.store.get()
+              polls[pollId] = poll
+              this.store.set({ polls })
+            }
+          } finally {
+            this.set({ loading: false })
           }
-        } finally {
-          this.set({ loading: false })
-        }
+        })()
+        return true
       },
       async onSubmit (e) {
         e.preventDefault()

src/routes/_components/status/StatusSpoiler.html

@@ -81,6 +81,7 @@
           this.fire('recalculateHeight')
           stop('clickSpoilerButton')
         })
+        return true
       }
     }
   }

src/routes/_components/status/StatusToolbar.html

@@ -77,22 +77,22 @@
         optionsKey
       } = this.get()
       registerClickDelegates(this, {
-        [favoriteKey]: (e) => {
-          e.preventDefault()
-          e.stopPropagation()
+        [favoriteKey]: () => {
           this.toggleFavorite()
+          return true
         },
-        [reblogKey]: (e) => {
-          e.preventDefault()
-          e.stopPropagation()
+        [reblogKey]: () => {
           this.reblog()
+          return true
         },
-        [replyKey]: (e) => {
-          e.preventDefault()
-          e.stopPropagation()
+        [replyKey]: () => {
           this.reply()
+          return true
         },
-        [optionsKey]: (e) => this.onOptionsClick(e)
+        [optionsKey]: () => {
+          this.onOptionsClick()
+          return true
+        }
       })
       on('postedStatus', this, this.onPostedStatus)
     },
@@ -127,9 +127,7 @@
           this.fire('recalculateHeight')
         })
       },
-      async onOptionsClick (e) {
-        e.preventDefault()
-        e.stopPropagation()
+      async onOptionsClick () {
         let { originalStatus, originalAccountId } = this.get()
         let updateRelationshipPromise = updateProfileAndRelationship(originalAccountId)
         let showStatusOptionsDialog = await importShowStatusOptionsDialog()

src/routes/_utils/delegate.js

@@ -28,9 +28,10 @@ function onEvent (e) {
         return // ignore if the user is selecting text inside the clickable area
       }
     }
-    e.preventDefault()
-    e.stopPropagation()
-    callbacks[key](e)
+    if (callbacks[key](e)) { // callback returns true to indicate it has handled the action
+      e.preventDefault()
+      e.stopPropagation()
+    }
   }
 }