From 5bb10036b57bca36d531a74e8b03188d43ec7862 Mon Sep 17 00:00:00 2001
From: Gittenburg <gittenburg@fsinf.at>
Date: Mon, 6 Jul 2020 22:55:45 +0200
Subject: [PATCH] emoji_picker: Allow selecting multiple while holding Shift.

We detect shift with event.shiftKey so we need to pass the event around.

Fixes #8465.
---
 static/js/emoji_picker.js                | 23 ++++++++++++++---------
 static/styles/reactions.scss             |  1 +
 templates/zerver/help/emoji-reactions.md |  3 +++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/static/js/emoji_picker.js b/static/js/emoji_picker.js
index 8c4d9e07e1..ba1d9c230f 100644
--- a/static/js/emoji_picker.js
+++ b/static/js/emoji_picker.js
@@ -235,7 +235,7 @@ function filter_emojis() {
     }
 }
 
-function toggle_reaction(emoji_name) {
+function toggle_reaction(emoji_name, event) {
     const message_id = current_msg_list.selected_id();
     const message = message_store.get(message_id);
     if (!message) {
@@ -243,8 +243,13 @@ function toggle_reaction(emoji_name) {
         return;
     }
 
-    reactions.toggle_emoji_reaction(message_id, emoji_name);
-    exports.hide_emoji_popover();
+    reactions.toggle_emoji_reaction(message_id, emoji_name, event);
+
+    if (event === undefined || !event.shiftKey) {
+        exports.hide_emoji_popover();
+    }
+
+    $(event.target).closest('.reaction').toggleClass('reacted');
 }
 
 function is_composition(emoji) {
@@ -259,13 +264,13 @@ function maybe_select_emoji(e) {
             if (is_composition(first_emoji)) {
                 first_emoji.click();
             } else {
-                toggle_reaction(first_emoji.attr("data-emoji-name"));
+                toggle_reaction(first_emoji.attr("data-emoji-name"), e);
             }
         }
     }
 }
 
-function toggle_selected_emoji() {
+function toggle_selected_emoji(e) {
     // Toggle the currently selected emoji.
     const selected_emoji = get_selected_emoji();
 
@@ -275,7 +280,7 @@ function toggle_selected_emoji() {
 
     const emoji_name = $(selected_emoji).attr("data-emoji-name");
 
-    toggle_reaction(emoji_name);
+    toggle_reaction(emoji_name, e);
 }
 
 function round_off_to_previous_multiple(number_to_round, multiple) {
@@ -399,7 +404,7 @@ exports.navigate = function (event_name, e) {
         if (is_composition(e.target)) {
             e.target.click();
         } else {
-            toggle_selected_emoji();
+            toggle_selected_emoji(e);
         }
         return true;
     }
@@ -634,13 +639,13 @@ exports.toggle_emoji_popover = function (element, id) {
 
 exports.register_click_handlers = function () {
 
-    $(document).on('click', '.emoji-popover-emoji.reaction', function () {
+    $(document).on('click', '.emoji-popover-emoji.reaction', function (e) {
         // When an emoji is clicked in the popover,
         // if the user has reacted to this message with this emoji
         // the reaction is removed
         // otherwise, the reaction is added
         const emoji_name = $(this).attr("data-emoji-name");
-        toggle_reaction(emoji_name);
+        toggle_reaction(emoji_name, e);
     });
 
     $(document).on('click', '.emoji-popover-emoji.composition', function (e) {
diff --git a/static/styles/reactions.scss b/static/styles/reactions.scss
index 9755f6dbfe..5eb763f707 100644
--- a/static/styles/reactions.scss
+++ b/static/styles/reactions.scss
@@ -124,6 +124,7 @@
 .emoji-info-popover {
     padding: 0;
     height: 370px;
+    user-select: none;
 
     .popover-content {
         padding: 0;
diff --git a/templates/zerver/help/emoji-reactions.md b/templates/zerver/help/emoji-reactions.md
index 9ef3cbbb53..f89f36e3df 100644
--- a/templates/zerver/help/emoji-reactions.md
+++ b/templates/zerver/help/emoji-reactions.md
@@ -26,6 +26,9 @@ underneath the message.
 If someone has already added a reaction, you can just click or tap on it to
 second the reaction.
 
+If you'd like to add multiple reactions without closing the emoji
+picker, you can hold the `Shift` key while making selections.
+
 ## See who reacted to a message
 
 Hover over an emoji reaction on a message to see who reacted with that emoji.