From 8f5936871c4130c2b155276106d73fac23538086 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 14 Nov 2022 16:53:22 +0100
Subject: [PATCH] FIX: prevents arrow keys to bubble into parents components
 (#19000)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ember-template-link doesn’t recommend keydown, but listening on keyup won't work to prevent the scroll of the container
---
 .../discourse/components/chat-emoji-picker.js        | 12 +++++++-----
 .../templates/components/chat-emoji-picker.hbs       |  5 +++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
index 4395e95d441..57623143a32 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-emoji-picker.js
@@ -86,10 +86,14 @@ export default class ChatEmojiPicker extends Component {
   }
 
   @action
-  didPressEscape(event) {
+  trapKeyUpEvents(event) {
     if (event.key === "Escape") {
       this.chatEmojiPickerManager.close();
     }
+
+    if (event.key === "ArrowUp") {
+      event.stopPropagation();
+    }
   }
 
   @action
@@ -220,10 +224,6 @@ export default class ChatEmojiPicker extends Component {
 
   @action
   didNavigateSection(event) {
-    if (event.type !== "keyup") {
-      return;
-    }
-
     const sectionEmojis = [
       ...event.target
         .closest(".chat-emoji-picker__section")
@@ -252,6 +252,7 @@ export default class ChatEmojiPicker extends Component {
 
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      event.stopPropagation();
 
       sectionEmojis
         .filter((c) => c.offsetTop > event.target.offsetTop)
@@ -261,6 +262,7 @@ export default class ChatEmojiPicker extends Component {
 
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      event.stopPropagation();
 
       sectionEmojis
         .reverse()
diff --git a/plugins/chat/assets/javascripts/discourse/templates/components/chat-emoji-picker.hbs b/plugins/chat/assets/javascripts/discourse/templates/components/chat-emoji-picker.hbs
index 6241619c02e..fedca825a68 100644
--- a/plugins/chat/assets/javascripts/discourse/templates/components/chat-emoji-picker.hbs
+++ b/plugins/chat/assets/javascripts/discourse/templates/components/chat-emoji-picker.hbs
@@ -1,5 +1,6 @@
 {{!-- template-lint-disable no-invalid-interactive --}}
 {{!-- template-lint-disable no-nested-interactive --}}
+{{!-- template-lint-disable no-down-event-binding --}}
 <div
   class={{concat-class
     "chat-emoji-picker"
@@ -7,7 +8,7 @@
   }}
   {{did-insert this.addClickOutsideEventListener}}
   {{will-destroy this.removeClickOutsideEventListener}}
-  {{on "keyup" this.didPressEscape}}
+  {{on "keydown" this.trapKeyUpEvents}}
 >
   <div class="chat-emoji-picker__filter-container">
     <DcFilterInput
@@ -150,7 +151,7 @@
               (concat "chat.emoji_picker." section)
               translatedFallback=section
             }}
-            {{on "keyup" this.didNavigateSection}}
+            {{on "keydown" this.didNavigateSection}}
           >
             <h2 class="chat-emoji-picker__section-title">
               {{i18n