platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 41 Pull Requests Packages Projects 4 Releases Wiki Activity

[Autocomplete UI] Better handling of `blur` events.

This commit is contained in:
Fabio Manganiello 2023-12-16 14:09:04 +01:00
parent 1dfbe0c12d
commit 028f48ed49
Signed by: blacklight
GPG Key ID: D90FBA7F76362774
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
platypush/backend/http/webapp/src/components/elements/Autocomplete.vue
View File

@ -10,7 +10,7 @@
:value="value" :value="value"
@focus="onFocus" @focus="onFocus"
@input="onInput" @input="onInput"
@blur="onInput" @blur="onBlur"
@keydown="onInputKeyDown" @keydown="onInputKeyDown"
@keyup="onInputKeyUp" @keyup="onInputKeyUp"
> >
@ -23,8 +23,7 @@
:key="item" :key="item"
:data-item="item" :data-item="item"
v-for="(item, i) in visibleItems" v-for="(item, i) in visibleItems"
@click="onItemSelect(item)" @click="onItemSelect(item)">
>
<span class="matching" v-if="value?.length">{{ item.substr(0, value.length) }}</span> <span class="matching" v-if="value?.length">{{ item.substr(0, value.length) }}</span>
<span class="normal">{{ item.substr(value?.length || 0) }}</span> <span class="normal">{{ item.substr(value?.length || 0) }}</span>
</div> </div>
@ -150,6 +149,14 @@ export default {
this.visible = true this.visible = true
}, },
onBlur(e) {
this.onInput(e)
this.$nextTick(() => {
if (this.valueIsInItems())
this.visible = false
})
},
onItemSelect(item) { onItemSelect(item) {
this.$emit("input", item) this.$emit("input", item)
this.$nextTick(() => { this.$nextTick(() => {