focus input in emoji picker and react picker

This commit is contained in:
Shpuld Shpuldson 2021-02-25 17:27:29 +02:00
parent 5faca01261
commit 34d18ac0c4
5 changed files with 21 additions and 2 deletions

View file

@ -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

View file

@ -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) {

View file

@ -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')

View file

@ -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: {

View file

@ -6,6 +6,7 @@
:offset="{ y: 5 }"
:bound-to="{ x: 'container' }"
remove-padding
@show="focusInput"
>
<div
slot="content"