mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-02-06 09:55:50 +00:00
Fixed search input behavior
This commit is contained in:
parent
4a574ee430
commit
01ca0a6d8b
@ -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(() => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user