fix: set the pointer to the selected option for the computed options

Author: howard-tzw

dev/app.vue

@@ -13,7 +13,7 @@
       </ul>
       <v-select
         v-model="selected"
-        :options="options"
+        :options="computedOptions"
         :clearable="false"
         :searchable="false"
       />
@@ -34,13 +34,19 @@ import BaseSelect from './BaseSelect.vue'
 const selected = ref(null)
 const options = ref(countries)
 
-const selectedOption = ref(null)
+const computedOptions = computed(() => countries)
+
 const baseSelectOptions = ref(
   countries.map((country) => ({
     name: country.label,
     value: country.value,
   }))
 )
+const selectedOption = ref()
+
+setTimeout(() => {
+  selectedOption.value = baseSelectOptions.value[0]
+}, 3000)
 </script>
 
 <style lang="scss">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-select",
-  "version": "0.0.5-beta.3",
+  "version": "0.0.5",
   "description": "A maintained fork of vue-select for Vue 3",
   "author": "Jeff Sagal <sagalbot@gmail.com>, Howard Chen <howard.tzw@gmail.com>",
   "homepage": "https://vue-select.org",

src/components/Select.vue

@@ -112,9 +112,11 @@
             'vs__dropdown-option--disabled': !selectable(option),
           }"
           :aria-selected="index === typeAheadPointer ? true : null"
-          @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
+          @mouseover="selectable(option) ? updateTypeAheadPointer(index) : null"
           @click.prevent.stop="selectable(option) ? select(option) : null"
-          @touchstart="selectable(option) ? (typeAheadPointer = index) : null"
+          @touchstart="
+            selectable(option) ? updateTypeAheadPointer(index) : null
+          "
         >
           <slot name="option" v-bind="normalizeOptionForSlot(option)">
             {{ getOptionLabel(option) }}
@@ -731,7 +733,7 @@ export default {
       }
 
       if (value !== undefined && value !== null && value !== '') {
-        return [].concat(value)
+        return Array.prototype.concat(value)
       }
 
       return []
@@ -892,7 +894,7 @@ export default {
      * @return {array}
      */
     filteredOptions() {
-      const optionList = [].concat(this.optionList)
+      const optionList = Array.prototype.concat(this.optionList)
 
       if (!this.filterable && !this.taggable) {
         return optionList

src/mixins/pointerScroll.js

@@ -38,7 +38,7 @@ export default {
           return (this.$refs.dropdownMenu.scrollTop = optionEl.offsetTop)
         } else if (bottom > bounds.bottom) {
           return (this.$refs.dropdownMenu.scrollTop =
-            optionEl.offsetTop - (bounds.height - height))
+            optionEl.offsetTop - (bounds.height - height) + 200)
         }
       }
     },

src/mixins/typeAheadPointer.js

@@ -27,6 +27,9 @@ export default {
   },
 
   methods: {
+    updateTypeAheadPointer(index) {
+      this.typeAheadPointer = index
+    },
     /**
      * Move the typeAheadPointer visually up the list by
      * setting it to the previous selectable option.
@@ -35,7 +38,7 @@ export default {
     typeAheadUp() {
       for (let i = this.typeAheadPointer - 1; i >= 0; i--) {
         if (this.selectable(this.filteredOptions[i])) {
-          this.typeAheadPointer = i
+          this.updateTypeAheadPointer(i)
           break
         }
       }
@@ -53,7 +56,7 @@ export default {
         i++
       ) {
         if (this.selectable(this.filteredOptions[i])) {
-          this.typeAheadPointer = i
+          this.updateTypeAheadPointer(i)
           break
         }
       }
@@ -76,12 +79,32 @@ export default {
      * Moves the pointer to the last selected option.
      */
     typeAheadToLastSelected() {
-      this.typeAheadPointer =
+      /**
+       * @feat If the option is an object, the "label" will be used as the previous selection record,
+       * enabling the "computed" options to function properly.
+       */
+      if (
+        this.filteredOptions[0] &&
+        typeof this.filteredOptions[0] === 'object'
+      ) {
+        const label = this.label
+        const index = this.filteredOptions
+          .map((option) => option[label])
+          .indexOf(this.selectedValue[this.selectedValue.length - 1]?.[label])
+
+        this.updateTypeAheadPointer(
+          this.selectedValue.length !== 0 ? index : -1
+        )
+        return
+      }
+
+      this.updateTypeAheadPointer(
         this.selectedValue.length !== 0
           ? this.filteredOptions.indexOf(
               this.selectedValue[this.selectedValue.length - 1]
             )
           : -1
+      )
     },
   },
 }