From 9e44c261fa3952c92f12fc4603cb66ff03e5375d Mon Sep 17 00:00:00 2001
From: gingervitis <omqmail@gmail.com>
Date: Sat, 9 Jan 2021 18:26:56 -0800
Subject: [PATCH] be able to pick multiple emojis ; move up picker div to see
 emojis inputted into textfield; restore focus into textfield after picker
 closes; address #612 (#614)

---
 webroot/js/components/chat/chat-input.js | 7 +++++++
 webroot/styles/chat.css                  | 3 +++
 2 files changed, 10 insertions(+)

diff --git a/webroot/js/components/chat/chat-input.js b/webroot/js/components/chat/chat-input.js
index 0c0ecc4d6..511e68241 100644
--- a/webroot/js/components/chat/chat-input.js
+++ b/webroot/js/components/chat/chat-input.js
@@ -68,6 +68,9 @@ export default class ChatInput extends Component {
           custom: json,
           initialCategory: 'custom',
           showPreview: false,
+          autoHide: false,
+          autoFocusSearch: false,
+          showAnimation: false,
           emojiSize: '24px',
           position: 'right-start',
           strategy: 'absolute',
@@ -75,6 +78,10 @@ export default class ChatInput extends Component {
         this.emojiPicker.on('emoji', emoji => {
           this.handleEmojiSelected(emoji);
         });
+        this.emojiPicker.on('hidden', () => {
+          this.formMessageInput.current.focus();
+          replaceCaret(this.formMessageInput.current);
+        });
       })
       .catch(error => {
         // this.handleNetworkingError(`Emoji Fetch: ${error}`);
diff --git a/webroot/styles/chat.css b/webroot/styles/chat.css
index ce24ea990..971210546 100644
--- a/webroot/styles/chat.css
+++ b/webroot/styles/chat.css
@@ -81,6 +81,9 @@
 
 /******************************/
 /* EMOJI PICKER OVERRIDES */
+.emoji-picker__wrapper {
+  margin-top: -30px !important;
+}
 .emoji-picker.owncast {
   --secondary-text-color: rgba(255, 255, 255, 0.5);
   --category-button-color: rgba(255, 255, 255, 0.5);