Fix User Experience with tab navigation (shentao#430)

pczarn · Damian Dulisz · commit d4305965499c · 2017-09-27T21:41:28.000+02:00
diff --git a/src/multiselectMixin.js b/src/multiselectMixin.js
@@ -464,6 +464,8 @@ export default {
       if (this.blockKeys.indexOf(key) !== -1 || this.disabled || option.$isLabel || option.$isDisabled) return
       /* istanbul ignore else */
       if (this.max && this.multiple && this.internalValue.length === this.max) return
+      /* istanbul ignore else */
+      if (key === 'Tab' && !this.pointerDirty) return
       if (option.isTag) {
         this.$emit('tag', option.label, this.id)
         this.search = ''
diff --git a/src/pointerMixin.js b/src/pointerMixin.js
@@ -2,6 +2,7 @@ export default {
   data () {
     return {
       pointer: 0,
+      pointerDirty: false,
       visibleElements: this.maxHeight / this.optionHeight
     }
   },
@@ -28,6 +29,9 @@ export default {
   watch: {
     filteredOptions () {
       this.pointerAdjust()
+    },
+    isOpen () {
+      this.pointerDirty = false
     }
   },
   methods: {
@@ -55,6 +59,7 @@ export default {
         /* istanbul ignore else */
         if (this.filteredOptions[this.pointer].$isLabel) this.pointerForward()
       }
+      this.pointerDirty = true
     },
     pointerBackward () {
       if (this.pointer > 0) {
@@ -69,6 +74,7 @@ export default {
         /* istanbul ignore else */
         if (this.filteredOptions[0].$isLabel) this.pointerForward()
       }
+      this.pointerDirty = true
     },
     pointerReset () {
       /* istanbul ignore else */
@@ -89,6 +95,7 @@ export default {
     },
     pointerSet (index) {
       this.pointer = index
+      this.pointerDirty = true
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,7 @@ export default {`
`2`	`2`	`data () {`
`3`	`3`	`return {`
`4`	`4`	`pointer: 0,`
	`5`	`+ pointerDirty: false,`
`5`	`6`	`visibleElements: this.maxHeight / this.optionHeight`
`6`	`7`	`}`
`7`	`8`	`},`
`@@ -28,6 +29,9 @@ export default {`
`28`	`29`	`watch: {`
`29`	`30`	`filteredOptions () {`
`30`	`31`	`this.pointerAdjust()`
	`32`	`+ },`
	`33`	`+ isOpen () {`
	`34`	`+ this.pointerDirty = false`
`31`	`35`	`}`
`32`	`36`	`},`
`33`	`37`	`methods: {`
`@@ -55,6 +59,7 @@ export default {`
`55`	`59`	`/* istanbul ignore else */`
`56`	`60`	`if (this.filteredOptions[this.pointer].$isLabel) this.pointerForward()`
`57`	`61`	`}`
	`62`	`+ this.pointerDirty = true`
`58`	`63`	`},`
`59`	`64`	`pointerBackward () {`
`60`	`65`	`if (this.pointer > 0) {`
`@@ -69,6 +74,7 @@ export default {`
`69`	`74`	`/* istanbul ignore else */`
`70`	`75`	`if (this.filteredOptions[0].$isLabel) this.pointerForward()`
`71`	`76`	`}`
	`77`	`+ this.pointerDirty = true`
`72`	`78`	`},`
`73`	`79`	`pointerReset () {`
`74`	`80`	`/* istanbul ignore else */`
`@@ -89,6 +95,7 @@ export default {`
`89`	`95`	`},`
`90`	`96`	`pointerSet (index) {`
`91`	`97`	`this.pointer = index`
	`98`	`+ this.pointerDirty = true`
`92`	`99`	`}`
`93`	`100`	`}`
`94`	`101`	`}`