From 7fd6cdc22c2ac0c2c0fcf307d9d63707cb0db72d Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 7 Jul 2019 17:32:50 -0700 Subject: [PATCH] fix: fix event propagation for click delegates (#1317) fixes #1316 --- src/routes/_components/status/Media.html | 11 ++++--- src/routes/_components/status/Status.html | 9 +++--- .../status/StatusMediaAttachments.html | 1 + src/routes/_components/status/StatusPoll.html | 29 ++++++++++--------- .../_components/status/StatusSpoiler.html | 1 + .../_components/status/StatusToolbar.html | 24 +++++++-------- src/routes/_utils/delegate.js | 7 +++-- 7 files changed, 43 insertions(+), 39 deletions(-) diff --git a/src/routes/_components/status/Media.html b/src/routes/_components/status/Media.html index a9244717..395d44bb 100644 --- a/src/routes/_components/status/Media.html +++ b/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: () => ({ diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html index e89194f5..3e992708 100644 --- a/src/routes/_components/status/Status.html +++ b/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() diff --git a/src/routes/_components/status/StatusMediaAttachments.html b/src/routes/_components/status/StatusMediaAttachments.html index 300ada06..86cfd28f 100644 --- a/src/routes/_components/status/StatusMediaAttachments.html +++ b/src/routes/_components/status/StatusMediaAttachments.html @@ -190,6 +190,7 @@ sensitivesShown[uuid] = !sensitivesShown[uuid] this.store.set({ sensitivesShown }) this.fire('recalculateHeight') + return true } } } diff --git a/src/routes/_components/status/StatusPoll.html b/src/routes/_components/status/StatusPoll.html index 125dd0d2..f7e717a2 100644 --- a/src/routes/_components/status/StatusPoll.html +++ b/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() diff --git a/src/routes/_components/status/StatusSpoiler.html b/src/routes/_components/status/StatusSpoiler.html index acabf18c..377503f3 100644 --- a/src/routes/_components/status/StatusSpoiler.html +++ b/src/routes/_components/status/StatusSpoiler.html @@ -81,6 +81,7 @@ this.fire('recalculateHeight') stop('clickSpoilerButton') }) + return true } } } diff --git a/src/routes/_components/status/StatusToolbar.html b/src/routes/_components/status/StatusToolbar.html index b236ffd5..63e10ecc 100644 --- a/src/routes/_components/status/StatusToolbar.html +++ b/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() diff --git a/src/routes/_utils/delegate.js b/src/routes/_utils/delegate.js index b54a8063..5913d1f0 100644 --- a/src/routes/_utils/delegate.js +++ b/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() + } } }