accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-01-25 16:18:33 +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) { if (this.highlightedItem > this.popupItems.length - 1) {
this.highlightedItem = this.popupItems.length - 1; this.highlightedItem = this.popupItems.length - 1;
} }
this.scrollToItem(this.highlightedItem);
}, },
highlightAboveItem() { highlightAboveItem() {
this.highlightedItem -= 1; this.highlightedItem -= 1;
if (this.highlightedItem < 0) { if (this.highlightedItem < 0) {
this.highlightedItem = 0; this.highlightedItem = 0;
} }
this.scrollToItem(this.highlightedItem);
}, },
getChildrenElement(h) { getChildrenElement(h) {
return [ return [
@ -66,7 +70,8 @@ export default {
}, },
getDropdownElement(h) { getDropdownElement(h) {
return h('div', { 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)); }, this.getDropdownItems(h));
}, },
getDropdownItems(h) { getDropdownItems(h) {
@ -77,6 +82,7 @@ export default {
href: '#', href: '#',
'data-value': item.value 'data-value': item.value
}, },
ref: i,
on: { on: {
click: e => { click: e => {
e.preventDefault(); e.preventDefault();
@ -93,6 +99,10 @@ export default {
onItemClick(item) { onItemClick(item) {
this.handleChange(item.value); this.handleChange(item.value);
}, },
scrollToItem(i) {
const scrollTo = this.$refs[i].offsetTop - 5;
this.$refs['dropdown-menu'].scrollTop = scrollTo;
},
async updateList(keyword) { async updateList(keyword) {
this.popupItems = await this.getList(keyword); this.popupItems = await this.getList(keyword);
this.popupOpen = this.popupItems.length > 0; this.popupOpen = this.popupItems.length > 0;
@ -117,3 +127,9 @@ export default {
} }
}; };
</script> </script>
<style>
.form-group[data-fieldtype="Link"] .dropdown-menu {
max-height: 200px;
overflow: auto;
}
</style>