Improve keydown handling for grid Add Filter autocomplete
should work the same, but this way also works with oruga
This commit is contained in:
parent
890ec64f3c
commit
098ed5b1cf
|
@ -581,26 +581,34 @@
|
||||||
location.href = url
|
location.href = url
|
||||||
},
|
},
|
||||||
|
|
||||||
addFilterButton(event) {
|
addFilterInit() {
|
||||||
this.addFilterShow = true
|
this.addFilterShow = true
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
const input = this.$refs.addFilterAutocomplete.$el.querySelector('input')
|
||||||
|
input.addEventListener('keydown', this.addFilterKeydown)
|
||||||
this.$refs.addFilterAutocomplete.focus()
|
this.$refs.addFilterAutocomplete.focus()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
addFilterHide() {
|
||||||
|
const input = this.$refs.addFilterAutocomplete.$el.querySelector('input')
|
||||||
|
input.removeEventListener('keydown', this.addFilterKeydown)
|
||||||
|
this.addFilterTerm = ''
|
||||||
|
this.addFilterShow = false
|
||||||
|
},
|
||||||
|
|
||||||
addFilterKeydown(event) {
|
addFilterKeydown(event) {
|
||||||
|
|
||||||
// ESC will clear searchbox
|
// ESC will clear searchbox
|
||||||
if (event.which == 27) {
|
if (event.which == 27) {
|
||||||
this.addFilterTerm = ''
|
this.addFilterHide()
|
||||||
this.addFilterShow = false
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
addFilterSelect(filtr) {
|
addFilterSelect(filtr) {
|
||||||
this.addFilter(filtr.key)
|
this.addFilter(filtr.key)
|
||||||
this.addFilterTerm = ''
|
this.addFilterHide()
|
||||||
this.addFilterShow = false
|
|
||||||
},
|
},
|
||||||
|
|
||||||
addFilter(filter_key) {
|
addFilter(filter_key) {
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
<b-button v-if="!addFilterShow"
|
<b-button v-if="!addFilterShow"
|
||||||
icon-pack="fas"
|
icon-pack="fas"
|
||||||
icon-left="plus"
|
icon-left="plus"
|
||||||
@click="addFilterButton">
|
@click="addFilterInit()">
|
||||||
Add Filter
|
Add Filter
|
||||||
</b-button>
|
</b-button>
|
||||||
|
|
||||||
|
@ -38,8 +38,7 @@
|
||||||
icon-pack="fas"
|
icon-pack="fas"
|
||||||
clearable
|
clearable
|
||||||
clear-on-select
|
clear-on-select
|
||||||
@select="addFilterSelect"
|
@select="addFilterSelect">
|
||||||
@keydown.native="addFilterKeydown">
|
|
||||||
</b-autocomplete>
|
</b-autocomplete>
|
||||||
|
|
||||||
<b-button @click="resetView()"
|
<b-button @click="resetView()"
|
||||||
|
|
Loading…
Reference in a new issue