From 34d18ac0c4e1903cb174df8957b855a048ec6b7e Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 25 Feb 2021 17:27:29 +0200
Subject: [PATCH] focus input in emoji picker and react picker

---
 CHANGELOG.md                                 | 1 +
 src/components/emoji_input/emoji_input.js    | 8 ++++++++
 src/components/popover/popover.js            | 7 +++++--
 src/components/react_button/react_button.js  | 6 ++++++
 src/components/react_button/react_button.vue | 1 +
 5 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1fbb3575..ae7e0daf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,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..cda2382e 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"