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