From e71cd73965f4ef08b27449b5c9747ee4c7f86d98 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 17 Dec 2021 16:18:33 +0100
Subject: [PATCH] UX: correctly handles escape on emoji picker (#15351)

---
 .../javascripts/discourse/app/components/emoji-picker.js  | 8 ++++++++
 .../discourse/app/templates/components/emoji-picker.hbs   | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/emoji-picker.js b/app/assets/javascripts/discourse/app/components/emoji-picker.js
index 9fab42b390f..3c0f3c85468 100644
--- a/app/assets/javascripts/discourse/app/components/emoji-picker.js
+++ b/app/assets/javascripts/discourse/app/components/emoji-picker.js
@@ -215,6 +215,14 @@ export default Component.extend({
     section && section.scrollIntoView();
   },
 
+  @action
+  keydown(event) {
+    if (event.code === "Escape") {
+      this.onClose();
+      return false;
+    }
+  },
+
   @action
   onFilter(event) {
     const emojiPicker = document.querySelector(".emoji-picker");
diff --git a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs b/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
index 68b2c0865cf..f41a27cb20b 100644
--- a/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/emoji-picker.hbs
@@ -1,5 +1,5 @@
 {{#if isActive}}
-  <div class="emoji-picker {{if @isActive "opened"}}">
+  <div {{on "keydown" (action "keydown")}} class="emoji-picker {{if @isActive "opened"}}">
     <div class="emoji-picker-category-buttons">
       {{#if recentEmojis.length}}
         <button type="button" data-section="recent" {{action "onCategorySelection" "recent"}} class="btn btn-default category-button emoji">