mirror of
https://github.com/frappe/books.git
synced 2024-12-25 04:06:04 +00:00
fix(ux): select closest match on blur
This commit is contained in:
parent
24e43d1ea0
commit
9fa7968fe2
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user