focus search input when opening emoji picker

This commit is contained in:
Henry Jameson 2022-10-10 20:11:04 +03:00
parent d2fabe1a71
commit 692342a77f
3 changed files with 2 additions and 8 deletions

View File

@ -278,17 +278,10 @@ const EmojiInput = {
} }
}, },
methods: { methods: {
focusPickerInput () {
const pickerEl = this.$refs.picker.$el
if (!pickerEl) return
const pickerInput = pickerEl.querySelector('input')
if (pickerInput) pickerInput.focus()
},
triggerShowPicker () { triggerShowPicker () {
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.picker.showPicker() this.$refs.picker.showPicker()
this.scrollIntoView() this.scrollIntoView()
this.focusPickerInput()
}) })
// This temporarily disables "click outside" handler // This temporarily disables "click outside" handler
// since external trigger also means click originates // since external trigger also means click originates
@ -306,7 +299,6 @@ const EmojiInput = {
this.scrollIntoView() this.scrollIntoView()
this.$refs.picker.showPicker() this.$refs.picker.showPicker()
this.$refs.picker.startEmojiLoad() this.$refs.picker.startEmojiLoad()
this.$nextTick(this.focusPickerInput)
} else { } else {
this.$refs.picker.hidePicker() this.$refs.picker.hidePicker()
} }

View File

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

View File

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