Tweak emoji picker focus

pykidos · Mar 13, 2024 · 299beed · 299beed
1 parent 17e1a03
commit 299beed
Showing 1 changed file with 11 additions and 0 deletions.
diff --git a/scripts/editor.js b/scripts/editor.js
@@ -33,6 +33,11 @@ class Editor {
         // Show/hide the emoji picker.
         this.emojiButton.addEventListener("click", (e) => {
             this.emojiPicker.classList.toggle("visible");
+
+            // Automatically focus the emoji picker search text box.
+            const input = app.model.editor.emojiPicker.shadowRoot.getElementById("search");
+            if (input)
+                input.focus();
         });
     }
 
@@ -48,6 +53,12 @@ class Editor {
         this.emojiPicker.addEventListener('focusout', (e) => {
             this.emojiPicker.classList.remove("visible");
         });
+
+        // Hide the picker when pressing Escape.
+        this.emojiPicker.addEventListener('keydown', (e) => {
+            if (e.key == "Escape")
+                this.emojiPicker.classList.remove("visible");
+        });
     }
 
     setupColorButton() {