accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2024-12-23 19:39:07 +00:00
Code Issues Releases Activity

Autocomplete dropdown max height and scroll on navigation

Browse Source
This commit is contained in:
Faris Ansari 2018-10-01 20:10:48 +05:30
parent c23e8af2eb
commit d1d1410db7
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/components/controls/Autocomplete.vue
View File

@ -50,12 +50,16 @@ export default {
if (this.highlightedItem > this.popupItems.length - 1) {
this.highlightedItem = this.popupItems.length - 1;
}
this.scrollToItem(this.highlightedItem);
},
highlightAboveItem() {
this.highlightedItem -= 1;
if (this.highlightedItem < 0) {
this.highlightedItem = 0;
}
this.scrollToItem(this.highlightedItem);
},
getChildrenElement(h) {
return [
@ -66,7 +70,8 @@ export default {
},
getDropdownElement(h) {
return h('div', {
class: ['dropdown-menu w-100', this.popupOpen ? 'show' : '']
class: ['dropdown-menu w-100', this.popupOpen ? 'show' : ''],
ref: 'dropdown-menu'
}, this.getDropdownItems(h));
},
getDropdownItems(h) {
@ -77,6 +82,7 @@ export default {
href: '#',
'data-value': item.value
},
ref: i,
on: {
click: e => {
e.preventDefault();
@ -93,6 +99,10 @@ export default {
onItemClick(item) {
this.handleChange(item.value);
},
scrollToItem(i) {
const scrollTo = this.$refs[i].offsetTop - 5;
this.$refs['dropdown-menu'].scrollTop = scrollTo;
},
async updateList(keyword) {
this.popupItems = await this.getList(keyword);
this.popupOpen = this.popupItems.length > 0;
@ -117,3 +127,9 @@ export default {
}
};
</script>
<style>
.form-group[data-fieldtype="Link"] .dropdown-menu {
max-height: 200px;
overflow: auto;
}
</style>