tea/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

Merge branch 'fix-emoji-input' into 'develop'

Browse source 
fix all known problems with clicks on autocomplete emojis

See merge request pleroma/pleroma-fe!857
This commit is contained in:
HJ 2019-06-25 21:38:45 +00:00
commit 221db9f210
2 changed files with 16 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/emoji-input/emoji-input.js
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: null
} }
}, },
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,21 @@ 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.blurTimeout = null
}
this.focused = true this.focused = true
this.setCaret(e) this.setCaret(e)
this.resize() this.resize()

2
src/components/emoji-input/emoji-input.vue
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="onClick($event, suggestion)"
class="autocomplete-item" class="autocomplete-item"
:class="{ highlighted: suggestion.highlighted }" :class="{ highlighted: suggestion.highlighted }"
> >