Merge branch 'emoji-popovers' into shigusegubu-vue3

* emoji-popovers:
  better autocomplete handling, fix leak
  focus search input when opening emoji picker

src/components/emoji_input/emoji_input.js

@@ -145,7 +145,7 @@ const EmojiInput = {
         !this.temporarilyHideSuggestions
     },
     textAtCaret () {
-      return (this.wordAtCaret || {}).word || ''
+      return this.wordAtCaret?.word
     },
     wordAtCaret () {
       if (this.modelValue && this.caret) {
@@ -197,6 +197,12 @@ const EmojiInput = {
 
         return emoji.displayText
       }
+    },
+    onInputScroll () {
+      this.$refs.hiddenOverlay.scrollTo({
+        top: this.input.scrollTop,
+        left: this.input.scrollLeft
+      })
     }
   },
   mounted () {
@@ -225,13 +231,7 @@ const EmojiInput = {
     input.addEventListener('click', this.onClickInput)
     input.addEventListener('transitionend', this.onTransition)
     input.addEventListener('input', this.onInput)
-    // FIXME LEAK
+    input.addEventListener('scroll', this.onInputScroll)
-    input.addEventListener('scroll', (e) => {
-      this.$refs.hiddenOverlay.scrollTo({
-        top: this.input.scrollTop,
-        left: this.input.scrollLeft
-      })
-    })
   },
   unmounted () {
     const { input } = this
@@ -244,6 +244,7 @@ const EmojiInput = {
       input.removeEventListener('click', this.onClickInput)
       input.removeEventListener('transitionend', this.onTransition)
       input.removeEventListener('input', this.onInput)
+      input.removeEventListener('scroll', this.onInputScroll)
     }
   },
   watch: {
@@ -256,11 +257,10 @@ const EmojiInput = {
       }
     },
     textAtCaret: async function (newWord) {
+      if (newWord === undefined) return
       const firstchar = newWord.charAt(0)
       if (newWord === firstchar) {
-        if (firstchar === ' ') {
+        this.suggestions = []
-          this.suggestions = []
-        }
         return
       }
       const matchedSuggestions = await this.suggest(newWord, this.maybeLocalizedEmojiNamesAndKeywords)
@@ -278,17 +278,10 @@ const EmojiInput = {
     }
   },
   methods: {
-    focusPickerInput () {
-      const pickerEl = this.$refs.picker.$el
-      if (!pickerEl) return
-      const pickerInput = pickerEl.querySelector('input')
-      if (pickerInput) pickerInput.focus()
-    },
     triggerShowPicker () {
       this.$nextTick(() => {
         this.$refs.picker.showPicker()
         this.scrollIntoView()
-        this.focusPickerInput()
       })
       // This temporarily disables "click outside" handler
       // since external trigger also means click originates
@@ -299,14 +292,11 @@ const EmojiInput = {
       }, 0)
     },
     togglePicker () {
-      console.log('piick')
       this.input.focus()
       if (!this.pickerShown) {
-        console.log('pick')
         this.scrollIntoView()
         this.$refs.picker.showPicker()
         this.$refs.picker.startEmojiLoad()
-        this.$nextTick(this.focusPickerInput)
       } else {
         this.$refs.picker.hidePicker()
       }

src/components/emoji_picker/emoji_picker.js

@@ -245,6 +245,7 @@ const EmojiPicker = {
       this.filteredEmojiGroups = this.getFilteredEmojiGroups()
       if (!oldContentLoaded) {
         this.$nextTick(() => {
+          this.$refs.search.focus()
           if (this.defaultGroup) {
             this.highlight(this.defaultGroup)
           }

src/components/emoji_picker/emoji_picker.vue

@@ -71,6 +71,7 @@
               class="form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
+              ref="search"
             >
           </div>
           <div