accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-12-24 11:55:46 +00:00
Code Issues Releases Activity

fix(ux): select closest match on blur

Browse Source
This commit is contained in:
18alantom 2021-11-25 15:22:59 +05:30
parent 24e43d1ea0
commit 9fa7968fe2
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Controls/AutoComplete.vue
View File

@ -5,7 +5,7 @@
toggleDropdown, toggleDropdown,
highlightItemUp, highlightItemUp,
highlightItemDown, highlightItemDown,
selectHighlightedItem selectHighlightedItem,
}" }"
> >
<div class="text-gray-600 text-sm mb-1" v-if="showLabel"> <div class="text-gray-600 text-sm mb-1" v-if="showLabel">
@ -18,8 +18,8 @@
:value="linkValue" :value="linkValue"
:placeholder="inputPlaceholder" :placeholder="inputPlaceholder"
:readonly="isReadOnly" :readonly="isReadOnly"
@focus="e => onFocus(e, toggleDropdown)" @focus="(e) => onFocus(e, toggleDropdown)"
@blur="e => onBlur(e.target.value)" @blur="(e) => onBlur(e.target.value)"
@input="onInput" @input="onInput"
@keydown.up="highlightItemUp" @keydown.up="highlightItemUp"
@keydown.down="highlightItemDown" @keydown.down="highlightItemDown"
@ -39,7 +39,7 @@ export default {
name: 'AutoComplete', name: 'AutoComplete',
extends: Base, extends: Base,
components: { components: {
Dropdown Dropdown,
}, },
data() { data() {
return { return {
@ -47,7 +47,7 @@ export default {
showDropdown: false, showDropdown: false,
isLoading: false, isLoading: false,
suggestions: [], suggestions: [],
highlightedIndex: -1 highlightedIndex: -1,
}; };
}, },
watch: { watch: {
@ -55,8 +55,8 @@ export default {
immediate: true, immediate: true,
handler(newValue) { handler(newValue) {
this.linkValue = newValue; this.linkValue = newValue;
} },
} },
}, },
computed: {}, computed: {},
methods: { methods: {
@ -68,7 +68,7 @@ export default {
} }
this.isLoading = true; this.isLoading = true;
let suggestions = await this.getSuggestions(keyword); let suggestions = await this.getSuggestions(keyword);
this.suggestions = suggestions.map(d => { this.suggestions = suggestions.map((d) => {
if (!d.action) { if (!d.action) {
d.action = () => this.setSuggestion(d); d.action = () => this.setSuggestion(d);
} }
@ -83,11 +83,11 @@ export default {
? await this.df.getList() ? await this.df.getList()
: this.df.options || []; : this.df.options || [];
let items = list.map(d => { let items = list.map((d) => {
if (typeof d === 'string') { if (typeof d === 'string') {
return { return {
label: d, label: d,
value: d value: d,
}; };
} }
return d; return d;
@ -97,7 +97,7 @@ export default {
return items; return items;
} }
return items.filter(d => { return items.filter((d) => {
let key = keyword.toLowerCase(); let key = keyword.toLowerCase();
return ( return (
d.label.toLowerCase().includes(key) || d.label.toLowerCase().includes(key) ||
@ -116,15 +116,25 @@ export default {
this.updateSuggestions(); this.updateSuggestions();
this.$emit('focus', e); this.$emit('focus', e);
}, },
onBlur(value) { async onBlur(value) {
if (value === '' || value == null) { if (value === '' || value == null) {
this.triggerChange(''); this.triggerChange('');
} }
if (value && !this.suggestions.includes(value)) {
const suggestion = await this.getSuggestions(value);
if (suggestion.length < 2) {
return;
}
this.setSuggestion(suggestion[0]);
}
}, },
onInput(e) { onInput(e) {
this.toggleDropdown(true); this.toggleDropdown(true);
this.updateSuggestions(e); this.updateSuggestions(e);
} },
} },
}; };
</script> </script>