Fixed search input behavior

This commit is contained in:
Grzegorz Leoniec 2019-03-04 11:25:19 +01:00
parent 4a574ee430
commit 01ca0a6d8b
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377

View File

@ -10,7 +10,7 @@
@keydown.tab="closeAndBlur" @keydown.tab="closeAndBlur"
@keydown.self.down.prevent="pointerNext" @keydown.self.down.prevent="pointerNext"
@keydown.self.up.prevent="pointerPrev" @keydown.self.up.prevent="pointerPrev"
@keypress.enter.prevent.stop="handleEnter" @keydown.enter.prevent.stop="handleEnter"
@keyup.esc="close"> @keyup.esc="close">
<div <div
v-if="icon" v-if="icon"
@ -225,6 +225,14 @@ export default {
type: Boolean, type: Boolean,
default: true default: true
}, },
/**
* Wheter the search string inside the inputfield should be resetted
* when selected
*/
autoResetSearch: {
type: Boolean,
default: false
},
/** /**
* Function to filter the results * Function to filter the results
*/ */
@ -275,12 +283,20 @@ export default {
this.pointer = max this.pointer = max
}) })
} }
},
searchString(value) {
this.setPointer(-1)
} }
}, },
methods: { methods: {
handleSelect(options) { handleSelect(options) {
if (this.pointerMax <= 0) {
return
}
this.selectOption(options) this.selectOption(options)
this.resetSearch() if (this.autoResetSearch || this.multiple) {
this.resetSearch()
}
if (this.multiple) { if (this.multiple) {
this.$refs.search.focus() this.$refs.search.focus()
this.handleFocus() this.handleFocus()
@ -293,13 +309,20 @@ export default {
}, },
openAndFocus() { openAndFocus() {
this.open() this.open()
if (this.autoResetSearch) {
this.resetSearch()
}
if (!this.focus || this.multiple) { if (!this.focus || this.multiple) {
this.$refs.search.focus() this.$refs.search.focus()
this.handleFocus() this.handleFocus()
} }
}, },
open() { open() {
this.resetSearch() if (this.autoResetSearch || this.multiple) {
this.resetSearch()
}
this.isOpen = true this.isOpen = true
}, },
close() { close() {
@ -321,13 +344,10 @@ export default {
} }
}, },
handleEnter(e) { handleEnter(e) {
console.log('Pointer', this.pointer) if (this.pointer >= 0) {
if (this.pointer) {
console.log('SELECT')
this.selectPointerOption(e) this.selectPointerOption(e)
} else { } else {
console.log('ENTER') this.setPointer(-1)
this.$emit('enter', e) this.$emit('enter', e)
} }
}, },
@ -351,7 +371,7 @@ export default {
} }
}, },
pointerPrev() { pointerPrev() {
if (this.pointer === 0) { if (this.pointer <= 0) {
this.pointer = this.pointerMax this.pointer = this.pointerMax
} else { } else {
this.pointer-- this.pointer--
@ -359,7 +379,7 @@ export default {
this.scrollToHighlighted() this.scrollToHighlighted()
}, },
pointerNext() { pointerNext() {
if (this.pointer === this.pointerMax) { if (this.pointer >= this.pointerMax) {
this.pointer = 0 this.pointer = 0
} else { } else {
this.pointer++ this.pointer++
@ -368,7 +388,7 @@ export default {
}, },
scrollToHighlighted() { scrollToHighlighted() {
clearTimeout(this.hadKeyboardInput) clearTimeout(this.hadKeyboardInput)
if (!this.$refs.options || !this.$refs.options.children.length) { if (!this.$refs.options || !this.$refs.options.children.length || this.pointerMax <= -1) {
return return
} }
this.hadKeyboardInput = setTimeout(() => { this.hadKeyboardInput = setTimeout(() => {