Improve keydown handling for grid Add Filter autocomplete

should work the same, but this way also works with oruga
This commit is contained in:
Lance Edgar 2024-04-26 11:02:48 -05:00
parent 890ec64f3c
commit 098ed5b1cf
2 changed files with 15 additions and 8 deletions

View file

@ -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) {

View file

@ -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()"