diff --git a/src/components/Select.vue b/src/components/Select.vue index f3d3157..5176e93 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -58,7 +58,7 @@ .v-select > .dropdown-menu { margin: 0; width: 100%; - overflow-y: auto; + overflow-y: scroll; border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; @@ -152,17 +152,19 @@ -
+ @@ -440,7 +442,10 @@ * @return {void} */ typeAheadUp() { - if (this.typeAheadPointer > 0) this.typeAheadPointer-- + if (this.typeAheadPointer > 0) { + this.typeAheadPointer-- + this.maybeAdjustScrollPosition() + } }, /** @@ -449,7 +454,10 @@ * @return {void} */ typeAheadDown() { - if (this.typeAheadPointer < this.filteredOptions.length - 1) this.typeAheadPointer++ + if (this.typeAheadPointer < this.filteredOptions.length - 1) { + this.typeAheadPointer++ + this.maybeAdjustScrollPosition() + } }, /** @@ -469,6 +477,26 @@ } }, + maybeAdjustScrollPosition() { + let offset = this.$els.dropdownMenu.children[0].offsetHeight * ( this.typeAheadPointer + 1 ) + let bounds = this.$els.dropdownMenu.offsetHeight + + + let scrollTo = this.$els.dropdownMenu.children[this.typeAheadPointer] + + console.dir(this.$els.dropdownMenu) + +// if( offset > listHeight ) { +// console.log('scroll') +// } + +// console.log(offset, listHeight) + }, + + test(e) { + console.dir(e) + }, + /** * If there is any text in the search input, remove it. * Otherwise, blur the search input to close the dropdown. @@ -517,6 +545,10 @@ computed: { + scrollTop() { + return [this.$els.dropdownMenu.scrollTop,this.$el.scrollTop] + }, + /** * Classes to be output on .dropdown * @return {Object}