[FIX] mail: search in emoji picker should scroll top

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

@@ -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: "" });

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]
         );