Skip to content

fix: #505 and #516 inconsistent event propagation causes issues in notes and emoji picker when clicking on emojis

Tess K requested to merge tess/Sharkey:bugfix/505-unpinning-emojis into develop

What does this PR do? This MR fixes #505 (closed) and #516 (closed) by only stopping event bubbling for onclick events in the MkEmoji and MkCustomEmoji components when the menu prop passed to the component is true. #505 (closed) was introduced in commit 751404f5 but only for MkEmoji, this MR also adresses the same issue as that commit but for MkCustomEmoji as well, and in a way that doesn't break other parts of the UI where click events for MkEmoji and MkCustomEmoji are supposed to be handled higher up in the DOM (such as the emoji picker).

The fix is implemented by removing the v-on:click.stop event modifier and instead adding the functionality (Event.stopPropagation) to the onClick method itself to conditionally stop propagation. This is because, as far as I can gather, Vue event modifiers are evaluated at compile time, which means you can't conditionally and dynamically apply them.

The reason this MR fixes two issues at once is because both issues are rectified by a consistent approach to event bubbling in both components.

Before the MR:

When clicking on a custom emoji in a note on the timeline:

image

When clicking in the middle of a "native" emoji in the emoji picker (nothing happens, lol):

image

After the MR:

When clicking on a custom emoji in a note on the timeline:

image

When clicking in the middle of a "native" emoji in the emoji picker

image

Contribution Guidelines By submitting this merge request, you agree to follow our Contribution Guidelines

  • I agree to follow this project's Contribution Guidelines
  • I have made sure to test this pull request
Edited by Tess K

Merge request reports