fix: async option can't selected [Select Component]

Author: koppthe

src/components/select/src/option.vue

@@ -5,7 +5,7 @@
       selected ? 'at-select__option--selected' : '',
       isFocus ? 'at-select__option--focus' : ''
     ]"
-    @click.stop="select"
+    @click.stop="doSelect"
     @mouseout.stop="blur"
     v-show="!hidden"
     ref="option"
@@ -20,6 +20,7 @@ import Emitter from 'src/mixins/emitter'
 export default {
   name: 'AtOption',
   mixins: [Emitter],
+  inject: ['select'],
   props: {
     value: {
       type: [String, Number],
@@ -48,7 +49,7 @@ export default {
     }
   },
   methods: {
-    select () {
+    doSelect () {
       if (this.disabled) return false
       this.dispatch('AtSelect', 'on-select-selected', this.value)
     },
@@ -61,13 +62,26 @@ export default {
     }
   },
   mounted () {
+    this.select.optionInstances.push(this)
+    this.select.options.push({
+      _instance: this,
+      value: this.value,
+      label: (typeof this.label === 'undefined') ? this.$el.innerHTML : this.label
+    })
     this.searchLabel = this.$el.innerHTML
     this.$on('on-select-close', () => {
       this.isFocus = false
     })
     this.$on('on-query-change', val => {
       this.queryChange(val)
     })
+  },
+  beforeDestroy () {
+    this.select.options.forEach((option, idx) => {
+      if (option._instance === this) {
+        this.select.onOptionDestroy(idx)
+      }
+    })
   }
 }
 </script>

src/components/select/src/select.vue

@@ -126,6 +126,11 @@ export default {
       model: this.value
     }
   },
+  provide () {
+    return {
+      'select': this
+    }
+  },
   computed: {
     showPlaceholder () {
       let status = false
@@ -236,7 +241,7 @@ export default {
           options.forEach(option => {
             if (option.isFocus) {
               hasFocus = true
-              option.select()
+              option.doSelect()
             }
           })
 
@@ -253,21 +258,19 @@ export default {
       options.forEach(option => {
         if (!firstOption && !option.hidden) {
           firstOption = option
-          option.select()
+          option.doSelect()
         }
       })
     },
     updateOptions () {
       const options = []
-      let index = 1
 
       const optionsEle = findComponentsDownward(this, 'AtOption')
       optionsEle.forEach(option => {
         options.push({
           value: option.value,
           label: (typeof option.label === 'undefined') ? option.$el.innerHTML : option.label
         })
-        option.index = index++
 
         this.optionInstances.push(option)
       })
@@ -277,6 +280,10 @@ export default {
       this.updateSingleSelected(true)
       this.updateMultipleSelected(true)
     },
+    onOptionDestroy (index) {
+      this.options.splice(index, 1)
+      this.optionInstances.splice(index, 1)
+    },
     updateSingleSelected (init = false) {
       const type = typeof this.model
 
@@ -413,8 +420,8 @@ export default {
 
       const options = findComponentsDownward(this, 'AtOption')
 
-      options.forEach(option => {
-        if (option.index === this.focusIndex) {
+      options.forEach((option, idx) => {
+        if ((idx + 1) === this.focusIndex) {
           isValid = !option.disabled && !option.hidden
 
           if (isValid) {