From 03aada713a1e3dc902e894874ecf7c3cb22e873a Mon Sep 17 00:00:00 2001
From: "Louis Wicket (wil)" <wil@odoo.com>
Date: Tue, 25 Apr 2023 08:19:57 +0000
Subject: [PATCH] [IMP] mail: hold shift to select emoji without closing the
 picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Clicking on an emoji from the emoji picker while holding down the Shift
key now prevents the emoji picker from closing, allowing users to easily
select multiple emoji in one go.

Task-3288704.

closes odoo/odoo#119598

Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../static/src/emoji_picker/emoji_picker.js    |  6 ++++--
 .../static/src/emoji_picker/emoji_picker.xml   |  2 +-
 addons/mail/static/tests/emoji/emoji_tests.js  | 18 ++++++++++++++++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/addons/mail/static/src/emoji_picker/emoji_picker.js b/addons/mail/static/src/emoji_picker/emoji_picker.js
index c9137ea10af..10ffd4dd36a 100644
--- a/addons/mail/static/src/emoji_picker/emoji_picker.js
+++ b/addons/mail/static/src/emoji_picker/emoji_picker.js
@@ -295,8 +295,10 @@ export class EmojiPicker extends Component {
         this.recent[codepoints]++;
         browser.localStorage.setItem("mail.emoji.frequent", JSON.stringify(this.recent));
         this.gridRef.el.scrollTop = 0;
-        this.props.close();
-        this.props.onClose();
+        if (!ev.shiftKey) {
+            this.props.close();
+            this.props.onClose();
+        }
     }
 
     highlightActiveCategory() {
diff --git a/addons/mail/static/src/emoji_picker/emoji_picker.xml b/addons/mail/static/src/emoji_picker/emoji_picker.xml
index 6d7a2be13f3..d8053859097 100644
--- a/addons/mail/static/src/emoji_picker/emoji_picker.xml
+++ b/addons/mail/static/src/emoji_picker/emoji_picker.xml
@@ -26,7 +26,7 @@
                 <hr class="mx-2 my-0 text-muted"/>
             </div>
             <t t-set="itemIndex" t-value="0"/>
-            <div class="o-mail-EmojiPicker-content overflow-auto d-flex flex-wrap align-items-center" t-att-class="getEmojis().length === 0 ? 'flex-column justify-content-center' : 'align-content-start'" t-ref="emoji-grid" t-on-scroll="highlightActiveCategory">
+            <div class="o-mail-EmojiPicker-content overflow-auto d-flex flex-wrap align-items-center user-select-none" t-att-class="getEmojis().length === 0 ? 'flex-column justify-content-center' : 'align-content-start'" t-ref="emoji-grid" t-on-scroll="highlightActiveCategory">
                 <t t-if="state.searchStr and getEmojis().length === 0" class="d-flex flex-column">
                     <span class="o-mail-EmojiPicker-empty">😢</span>
                     <span class="fs-5 text-muted">No emoji match your search</span>
diff --git a/addons/mail/static/tests/emoji/emoji_tests.js b/addons/mail/static/tests/emoji/emoji_tests.js
index bd5eb35b70c..fa68557a25b 100644
--- a/addons/mail/static/tests/emoji/emoji_tests.js
+++ b/addons/mail/static/tests/emoji/emoji_tests.js
@@ -150,3 +150,21 @@ QUnit.test("first category should be highlight by default", async (assert) => {
     await click("button[aria-label='Emojis']");
     assert.containsOnce($, ".o-mail-EmojiPicker-header .o-mail-Emoji:eq(0).bg-300");
 });
+
+QUnit.test(
+    "selecting an emoji while holding down the Shift key prevents the emoji picker from closing",
+    async (assert) => {
+        const pyEnv = await startServer();
+        const channelId = pyEnv["discuss.channel"].create({ name: "" });
+        const { openDiscuss } = await start();
+        await openDiscuss(channelId);
+        await click("button[aria-label='Emojis']");
+        await afterNextRender(() =>
+            $(".o-mail-EmojiPicker-content .o-mail-Emoji:contains(👺)")[0].dispatchEvent(
+                new MouseEvent("click", { shiftKey: true })
+            )
+        );
+        assert.containsOnce($, ".o-mail-EmojiPicker");
+        assert.strictEqual($(".o-mail-Composer-input").val(), "👺");
+    }
+);