[IMP] mail: hold shift to select emoji without closing the picker

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>

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() {

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>

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(), "👺");
+    }
+);