fix all known problems with clicks on autocomplete emojis

This commit is contained in:
Henry Jameson 2019-06-25 21:31:43 +03:00
parent a6bcd56c9f
commit 01bda605a7
2 changed files with 15 additions and 7 deletions

View file

@ -59,7 +59,8 @@ const EmojiInput = {
input: undefined,
highlighted: 0,
caret: 0,
focused: false
focused: false,
blurTimeout: false,
}
},
computed: {
@ -122,12 +123,12 @@ const EmojiInput = {
this.$emit('input', newValue)
this.caret = 0
},
replaceText (e) {
replaceText (e, suggestion) {
const len = this.suggestions.length || 0
if (this.textAtCaret.length === 1) { return }
if (len > 0) {
const suggestion = this.suggestions[this.highlighted]
const replacement = suggestion.replacement
if (len > 0 || suggestion) {
const chosenSuggestion = suggestion || this.suggestions[this.highlighted]
const replacement = chosenSuggestion.replacement
const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement)
this.$emit('input', newValue)
this.highlighted = 0
@ -173,13 +174,20 @@ const EmojiInput = {
onBlur (e) {
// Clicking on any suggestion removes focus from autocomplete,
// preventing click handler ever executing.
setTimeout(() => {
this.blurTimeout = setTimeout(() => {
this.focused = false
this.setCaret(e)
this.resize()
}, 200)
},
onClick (e, suggestion) {
this.replaceText(e, suggestion)
},
onFocus (e) {
if (this.blurTimeout) {
clearTimeout(this.blurTimeout)
}
this.focused = true
this.setCaret(e)
this.resize()

View file

@ -6,7 +6,7 @@
<div
v-for="(suggestion, index) in suggestions"
:key="index"
@click.stop.prevent="replaceText"
@click.stop.prevent="(e) => onClick(e, suggestion)"
class="autocomplete-item"
:class="{ highlighted: suggestion.highlighted }"
>