UX: correctly handles escape on emoji picker (#15351)

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

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">