Fix the predicted number of visible options (shentao#427)

pczarn · Damian Dulisz · commit 94d956f02e7b · 2017-09-27T21:53:54.000+02:00
Navigation in the dropdown works with scrolling. Fixes shentao#426
diff --git a/src/multiselectMixin.js b/src/multiselectMixin.js
@@ -601,10 +601,10 @@ export default {
 
       if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || this.openDirection === 'below' || this.openDirection === 'bottom') {
         this.prefferedOpenDirection = 'below'
-        this.optimizedHeight = Math.min(spaceBelow, this.maxHeight) - 40
+        this.optimizedHeight = Math.min(spaceBelow - 40, this.maxHeight)
       } else {
         this.prefferedOpenDirection = 'above'
-        this.optimizedHeight = Math.min(spaceAbove, this.maxHeight) - 40
+        this.optimizedHeight = Math.min(spaceAbove - 40, this.maxHeight)
       }
     }
   }
diff --git a/src/pointerMixin.js b/src/pointerMixin.js
@@ -2,8 +2,8 @@ export default {
   data () {
     return {
       pointer: 0,
-      pointerDirty: false,
-      visibleElements: this.maxHeight / this.optionHeight
+      visibleElements: this.optimizedHeight / this.optionHeight,
+      pointerDirty: false
     }
   },
   props: {
@@ -53,7 +53,7 @@ export default {
       if (this.pointer < this.filteredOptions.length - 1) {
         this.pointer++
         /* istanbul ignore next */
-        if (this.$refs.list.scrollTop <= this.pointerPosition - this.visibleElements * this.optionHeight) {
+        if (this.$refs.list.scrollTop <= this.pointerPosition - (this.visibleElements - 1) * this.optionHeight) {
           this.$refs.list.scrollTop = this.pointerPosition - (this.visibleElements - 1) * this.optionHeight
         }
         /* istanbul ignore else */

Original file line number	Diff line number	Diff line change
`@@ -601,10 +601,10 @@ export default {`
`601`	`601`
`602`	`602`	`if (hasEnoughSpaceBelow \|\| spaceBelow > spaceAbove \|\| this.openDirection === 'below' \|\| this.openDirection === 'bottom') {`
`603`	`603`	`this.prefferedOpenDirection = 'below'`
`604`		`- this.optimizedHeight = Math.min(spaceBelow, this.maxHeight) - 40`
	`604`	`+ this.optimizedHeight = Math.min(spaceBelow - 40, this.maxHeight)`
`605`	`605`	`} else {`
`606`	`606`	`this.prefferedOpenDirection = 'above'`
`607`		`- this.optimizedHeight = Math.min(spaceAbove, this.maxHeight) - 40`
	`607`	`+ this.optimizedHeight = Math.min(spaceAbove - 40, this.maxHeight)`
`608`	`608`	`}`
`609`	`609`	`}`
`610`	`610`	`}`