Merge branch 'feat/focus-input-with-emoji-pickers' into 'develop'

close #1048: Focus input in emoji picker and react picker

Closes #1048

See merge request pleroma/pleroma-fe!1357

5 files changed, 21 insertions, 2 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dbba715c..2685fd32 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 - Display 'people voted' instead of 'votes' for multi-choice polls
 - Optimized chat to not get horrible performance after keeping the same chat open for a long time
+- When opening emoji picker or react picker, it automatically focuses the search field
 
 ### Added
 - Added reason field for registration when approval is required
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 2068a598..dc03bc9f 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -194,11 +194,18 @@ const EmojiInput = {
     }
   },
   methods: {
+    focusPickerInput () {
+      const pickerEl = this.$refs.picker.$el
+      if (!pickerEl) return
+      const pickerInput = pickerEl.querySelector('input')
+      if (pickerInput) pickerInput.focus()
+    },
     triggerShowPicker () {
       this.showPicker = true
       this.$refs.picker.startEmojiLoad()
       this.$nextTick(() => {
         this.scrollIntoView()
+        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -214,6 +221,7 @@ const EmojiInput = {
       if (this.showPicker) {
         this.scrollIntoView()
         this.$refs.picker.startEmojiLoad()
+        this.$nextTick(this.focusPickerInput)
       }
     },
     replace (replacement) {
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 5e417fa0..bfe39212 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -121,9 +121,12 @@ const Popover = {
       }
     },
     showPopover () {
-      if (this.hidden) this.$emit('show')
+      const wasHidden = this.hidden
       this.hidden = false
-      this.$nextTick(this.updateStyles)
+      this.$nextTick(() => {
+        if (wasHidden) this.$emit('show')
+        this.updateStyles()
+      })
     },
     hidePopover () {
       if (!this.hidden) this.$emit('close')
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 5e7b7580..ce82c90d 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -23,6 +23,12 @@ const ReactButton = {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
       close()
+    },
+    focusInput () {
+      this.$nextTick(() => {
+        const input = this.$el.querySelector('input')
+        if (input) input.focus()
+      })
     }
   },
   computed: {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 04734674..4839024c 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -6,6 +6,7 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    @show="focusInput"
   >
     <div
       slot="content"