From d139240161319c87adeeefd3c344fa1a96756758 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Wed, 6 Sep 2023 09:25:28 +0000
Subject: [PATCH] [FIX] mail: search in emoji picker should scroll top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, when opening emoji picker and scrolling down
then making search, the scroll position was not reset to top.

This gave the impression that the search was incorrect, because
the most likely desired emoji is at the very top but was not visible
when searching in this condition.

This commit fixes the issue by enforcing scrolling top in emoji
picker content when the search term is updated.

Task-3493611

closes odoo/odoo#134675

X-original-commit: 7999ae51c51e24eea15edb8f08b2e35db4a774ad
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 addons/mail/static/tests/emoji/emoji_tests.js        | 12 ++++++++++++
 .../web/static/src/core/emoji_picker/emoji_picker.js |  6 ++++++
 2 files changed, 18 insertions(+)

diff --git a/addons/mail/static/tests/emoji/emoji_tests.js b/addons/mail/static/tests/emoji/emoji_tests.js
index 9e1ecaaed24..7654d035876 100644
--- a/addons/mail/static/tests/emoji/emoji_tests.js
+++ b/addons/mail/static/tests/emoji/emoji_tests.js
@@ -37,6 +37,18 @@ QUnit.test("search emoji from keywords with special regex character", async () =
     await contains(".o-Emoji", { text: "🆎" });
 });
 
+QUnit.test("updating search emoji should scroll top", 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 contains(".o-EmojiPicker-content", { scroll: 0 });
+    await scroll(".o-EmojiPicker-content", 150);
+    await insertText("input[placeholder='Search for an emoji']", "m");
+    await contains(".o-EmojiPicker-content", { scroll: 0 });
+});
+
 QUnit.test("Press Escape in emoji picker closes the emoji picker", async () => {
     const pyEnv = await startServer();
     const channelId = pyEnv["discuss.channel"].create({ name: "" });
diff --git a/addons/web/static/src/core/emoji_picker/emoji_picker.js b/addons/web/static/src/core/emoji_picker/emoji_picker.js
index dedd238d430..f9d3de548a7 100644
--- a/addons/web/static/src/core/emoji_picker/emoji_picker.js
+++ b/addons/web/static/src/core/emoji_picker/emoji_picker.js
@@ -131,6 +131,7 @@ export class EmojiPicker extends Component {
     categories = null;
     emojis = null;
     shouldScrollElem = null;
+    lastSearchStr;
 
     setup() {
         this.inputRef = useRef("input");
@@ -199,10 +200,15 @@ export class EmojiPicker extends Component {
         useEffect(
             () => {
                 if (this.state.searchStr) {
+                    this.gridRef.el.scrollTop = 0;
                     this.state.categoryId = null;
                 } else {
+                    if (this.lastSearchStr) {
+                        this.gridRef.el.scrollTop = 0;
+                    }
                     this.highlightActiveCategory();
                 }
+                this.lastSearchStr = this.state.searchStr;
             },
             () => [this.state.searchStr]
         );