updated logic for hiding picker and also added ability to hide suggestions with

esc key
This commit is contained in:
Henry Jameson 2019-09-12 20:14:35 +03:00
parent 0d8b68632b
commit 9bd0ed7912

View file

@ -78,6 +78,7 @@ const EmojiInput = {
focused: false, focused: false,
blurTimeout: null, blurTimeout: null,
showPicker: false, showPicker: false,
temporarilyHideSuggestions: false,
spamMode: false, spamMode: false,
disableClickOutside: false disableClickOutside: false
} }
@ -102,7 +103,11 @@ const EmojiInput = {
})) }))
}, },
showSuggestions () { showSuggestions () {
return this.focused && this.suggestions && this.suggestions.length > 0 && !this.showPicker return this.focused &&
this.suggestions &&
this.suggestions.length > 0 &&
!this.showPicker &&
!this.temporarilyHideSuggestions
}, },
textAtCaret () { textAtCaret () {
return (this.wordAtCaret || {}).word || '' return (this.wordAtCaret || {}).word || ''
@ -153,6 +158,7 @@ const EmojiInput = {
}, 0) }, 0)
}, },
togglePicker () { togglePicker () {
this.input.elm.focus()
this.showPicker = !this.showPicker this.showPicker = !this.showPicker
}, },
replace (replacement) { replace (replacement) {
@ -250,44 +256,68 @@ const EmojiInput = {
this.focused = true this.focused = true
this.setCaret(e) this.setCaret(e)
this.resize() this.resize()
this.temporarilyHideSuggestions = false
}, },
onKeyUp (e) { onKeyUp (e) {
const { key } = e
this.setCaret(e) this.setCaret(e)
this.resize() this.resize()
// Setting hider in keyUp to prevent suggestions from blinking
// when moving away from suggested spot
if (key === 'Escape') {
this.temporarilyHideSuggestions = true
} else {
this.temporarilyHideSuggestions = false
}
}, },
onPaste (e) { onPaste (e) {
this.setCaret(e) this.setCaret(e)
this.resize() this.resize()
}, },
onKeyDown (e) { onKeyDown (e) {
this.setCaret(e)
this.resize()
const { ctrlKey, shiftKey, key } = e const { ctrlKey, shiftKey, key } = e
if (key === 'Tab') { // Disable suggestions hotkeys if suggestions are hidden
if (shiftKey) { if (!this.temporarilyHideSuggestions) {
if (key === 'Tab') {
if (shiftKey) {
this.cycleBackward(e)
} else {
this.cycleForward(e)
}
}
if (key === 'ArrowUp') {
this.cycleBackward(e) this.cycleBackward(e)
} else { } else if (key === 'ArrowDown') {
this.cycleForward(e) this.cycleForward(e)
} }
} if (key === 'Enter') {
if (key === 'ArrowUp') { if (!ctrlKey) {
this.cycleBackward(e) this.replaceText(e)
} else if (key === 'ArrowDown') { }
this.cycleForward(e)
}
if (key === 'Enter') {
if (!ctrlKey) {
this.replaceText(e)
} }
} }
// Probably add optional keyboard controls for emoji picker?
// Escape hides suggestions, if suggestions are hidden it
// de-focuses the element (i.e. default browser behavior)
if (key === 'Escape') {
if (!this.temporarilyHideSuggestions) {
this.input.elm.focus()
}
}
this.showPicker = false
this.resize()
}, },
onInput (e) { onInput (e) {
this.showPicker = false this.showPicker = false
this.setCaret(e) this.setCaret(e)
this.resize()
this.$emit('input', e.target.value) this.$emit('input', e.target.value)
}, },
onCompositionUpdate (e) { onCompositionUpdate (e) {
this.showPicker = false
this.setCaret(e) this.setCaret(e)
this.resize() this.resize()
this.$emit('input', e.target.value) this.$emit('input', e.target.value)