From 9ef793073babb8ce32cb0aadff53399e798774a8 Mon Sep 17 00:00:00 2001
From: Sebin Song <songxevin@gmail.com>
Date: Tue, 29 Oct 2024 12:14:07 +1300
Subject: [PATCH] #2387 Two emoji picker issues (#2400)

* fix issue No. 1

* make sure emoticon is added to the cursor position

* add comment

* comment update
---
 frontend/views/containers/chatroom/Emoticons.vue | 13 +++++++++++--
 frontend/views/containers/chatroom/SendArea.vue  |  7 ++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/frontend/views/containers/chatroom/Emoticons.vue b/frontend/views/containers/chatroom/Emoticons.vue
index 69dbac8fff..493c88489f 100644
--- a/frontend/views/containers/chatroom/Emoticons.vue
+++ b/frontend/views/containers/chatroom/Emoticons.vue
@@ -1,7 +1,7 @@
 <template lang='pug'>
 .c-picker(:class='{ "is-active": isActive }' @click='clickBackDrop')
-  .c-picker-wrapper(:style='position')
-    picker(@select='select' :data='emoji' :show-preview='false')
+  .c-picker-wrapper(ref='pickerWrapper' :style='position')
+    picker(@select='select' :data='emoji' :show-preview='false' :auto-focus='true')
 </template>
 
 <script>
@@ -53,6 +53,8 @@ export default ({
       }
       this.lastFocus = document.activeElement
       this.isActive = true
+
+      this.$nextTick(this.focusSearch)
     },
     select (emoticon) {
       sbp('okTurtles.events/emit', SELECT_EMOTICON, emoticon)
@@ -105,6 +107,13 @@ export default ({
         this.closeEmoticonDlg()
       }
       this.debouncedSetPosition()
+    },
+    focusSearch () {
+      // It appears that there is no component-level method provided to focus the search. So using browser API instead here.
+      // (reference: https://github.com/serebrov/emoji-mart-vue/blob/master/src/components/search.vue)
+      const searchInputEl = this.$refs.pickerWrapper.querySelector('.emoji-mart-search input')
+
+      searchInputEl && searchInputEl.focus()
     }
   },
   watch: {
diff --git a/frontend/views/containers/chatroom/SendArea.vue b/frontend/views/containers/chatroom/SendArea.vue
index e1b509d237..e73e21ea07 100644
--- a/frontend/views/containers/chatroom/SendArea.vue
+++ b/frontend/views/containers/chatroom/SendArea.vue
@@ -774,7 +774,12 @@ export default ({
       }
     },
     selectEmoticon (emoticon) {
-      this.$refs.textarea.value = this.$refs.textarea.value + emoticon.native
+      // Making sure the emoticon is added to the cursor position
+      const inputEl = this.$refs.textarea
+      const valuePrev = inputEl.value.slice(0, inputEl.selectionStart) || ''
+      const valueAfter = inputEl.value.slice(inputEl.selectionEnd) || ''
+      inputEl.value = valuePrev + emoticon.native + valueAfter
+
       this.closeEmoticon()
       this.updateTextWithLines()
     },