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

View file

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