blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Autocomplete UI] Better handling of blur events.

Browse source
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(() => {