commit: 221db9f210b161851dd69bed87c49d0573d30e5f
parent: a6bcd56c9f731e28e5da1dd334c7f3564000e638
Author: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Tue, 25 Jun 2019 21:38:45 +0000
Merge branch 'fix-emoji-input' into 'develop'
fix all known problems with clicks on autocomplete emojis
See merge request pleroma/pleroma-fe!857
Diffstat:
2 files changed, 16 insertions(+), 7 deletions(-)
diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js
@@ -59,7 +59,8 @@ const EmojiInput = {
input: undefined,
highlighted: 0,
caret: 0,
- focused: false
+ focused: false,
+ blurTimeout: null
}
},
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,21 @@ 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.blurTimeout = null
+ }
+
this.focused = true
this.setCaret(e)
this.resize()
diff --git a/src/components/emoji-input/emoji-input.vue b/src/components/emoji-input/emoji-input.vue
@@ -6,7 +6,7 @@
<div
v-for="(suggestion, index) in suggestions"
:key="index"
- @click.stop.prevent="replaceText"
+ @click.stop.prevent="onClick($event, suggestion)"
class="autocomplete-item"
:class="{ highlighted: suggestion.highlighted }"
>