From ed35ae4dcdabf37fa6d40f07c3799f13e96fc42b Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 1 Sep 2023 09:17:48 +0200
Subject: [PATCH] FIX: closes chat emoji picker on body scroll (#23362)

Prior to this fix we would scroll the emoji picker with the body of the page in drawer mode.

With this fix scrolling inside the drawer or the emoji picker will scroll the drawer or the emoji picker, but, scrolling body will close the chat emoji picker.
---
 ... => chat-channel-message-emoji-picker.gjs} | 26 +++++++++++++++++++
 .../chat-channel-message-emoji-picker.hbs     |  7 -----
 .../components/chat-emoji-picker.hbs          |  1 +
 3 files changed, 27 insertions(+), 7 deletions(-)
 rename plugins/chat/assets/javascripts/discourse/components/{chat-channel-message-emoji-picker.js => chat-channel-message-emoji-picker.gjs} (62%)
 delete mode 100644 plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.hbs

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.js b/plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.gjs
similarity index 62%
rename from plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.js
rename to plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.gjs
index f8c6d4a25d8..0861363f1d2 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.gjs
@@ -3,13 +3,39 @@ import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { headerOffset } from "discourse/lib/offset-calculator";
 import { createPopper } from "@popperjs/core";
+import ChatEmojiPicker from "discourse/plugins/chat/discourse/components/chat-emoji-picker";
+import { modifier } from "ember-modifier";
 
 export default class ChatChannelMessageEmojiPicker extends Component {
+  <template>
+    {{! template-lint-disable modifier-name-case }}
+    <ChatEmojiPicker
+      @context="chat-channel-message"
+      @didInsert={{this.didInsert}}
+      @willDestroy={{this.willDestroy}}
+      @didSelectEmoji={{this.didSelectEmoji}}
+      @class="hidden"
+      {{this.listenToBodyScroll}}
+    />
+  </template>
+
   @service site;
   @service chatEmojiPickerManager;
 
   context = "chat-channel-message";
 
+  listenToBodyScroll = modifier(() => {
+    const handler = () => {
+      this.chatEmojiPickerManager.close();
+    };
+
+    document.addEventListener("scroll", handler);
+
+    return () => {
+      document.removeEventListener("scroll", handler);
+    };
+  });
+
   @action
   didSelectEmoji(emoji) {
     this.chatEmojiPickerManager.picker?.didSelectEmoji(emoji);
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.hbs
deleted file mode 100644
index 50899f81535..00000000000
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-message-emoji-picker.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<ChatEmojiPicker
-  @context="chat-channel-message"
-  @didInsert={{this.didInsert}}
-  @willDestroy={{this.willDestroy}}
-  @didSelectEmoji={{this.didSelectEmoji}}
-  @class="hidden"
-/>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
index 5e6738c3e56..a950f0399e7 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.hbs
@@ -15,6 +15,7 @@
     {{will-destroy (if @willDestroy @willDestroy (noop))}}
     {{will-destroy this.removeClickOutsideEventListener}}
     {{on "keydown" this.trapKeyDownEvents}}
+    ...attributes
   >
     <div class="chat-emoji-picker__filter-container">
       <DcFilterInput