separate typeahead pointer logic into mixin

src/components/Select.vue

@@ -169,9 +169,10 @@
 
 <script type="text/babel">
   import pointerScroll from '../mixins/pointerScroll'
+  import typeAheadPointer from '../mixins/typeAheadPointer'
 
   export default {
-    mixins: [pointerScroll],
+    mixins: [pointerScroll, typeAheadPointer],
 
     props: {
       /**
@@ -310,8 +311,7 @@
     data() {
       return {
         search: '',
-        open: false,
-        typeAheadPointer: -1,
+        open: false
       }
     },
 
@@ -326,11 +326,7 @@
       },
       multiple( val ) {
         this.$set('value', val ? [] : null)
-      },
-      filteredOptions() {
-        this.typeAheadPointer = 0
-        this.maybeAdjustScroll()
-      },
+      }
     },
 
     methods: {
@@ -439,47 +435,6 @@
         return option;
       },
 
-      /**
-       * Move the typeAheadPointer visually up the list by
-       * subtracting the current index by one.
-       * @return {void}
-       */
-      typeAheadUp() {
-        if (this.typeAheadPointer > 0) {
-          this.typeAheadPointer--
-          this.maybeAdjustScroll()
-        }
-      },
-
-      /**
-       * Move the typeAheadPointer visually down the list by
-       * adding the current index by one.
-       * @return {void}
-       */
-      typeAheadDown() {
-        if (this.typeAheadPointer < this.filteredOptions.length - 1) {
-          this.typeAheadPointer++
-          this.maybeAdjustScroll()
-        }
-      },
-
-      /**
-       * Select the option at the current typeAheadPointer position.
-       * Optionally clear the search input on selection.
-       * @return {void}
-       */
-      typeAheadSelect() {
-        if( this.filteredOptions[ this.typeAheadPointer ] ) {
-          this.select( this.filteredOptions[ this.typeAheadPointer ] );
-        } else if (this.taggable && this.search.length){
-          this.select(this.search)
-        }
-
-        if( this.clearSearchOnSelect ) {
-          this.search = "";
-        }
-      },
-
       /**
        * If there is any text in the search input, remove it.
        * Otherwise, blur the search input to close the dropdown.

src/mixins/pointerScroll.js

@@ -1,4 +1,10 @@
 export default {
+  watch: {
+    typeAheadPointer() {
+      this.maybeAdjustScroll()
+    }
+  },
+
   methods: {
     /**
      * Adjust the scroll position of the dropdown list

src/mixins/typeAheadPointer.js

@@ -0,0 +1,60 @@
+export default {
+  data() {
+    return {
+      typeAheadPointer: -1
+    }
+  },
+
+  watch: {
+    filteredOptions() {
+      this.typeAheadPointer = 0
+    }
+  },
+
+  methods: {
+    /**
+     * Move the typeAheadPointer visually up the list by
+     * subtracting the current index by one.
+     * @return {void}
+     */
+    typeAheadUp() {
+      if (this.typeAheadPointer > 0) {
+        this.typeAheadPointer--
+        if( this.maybeAdjustScroll ) {
+          this.maybeAdjustScroll()
+        }
+      }
+    },
+
+    /**
+     * Move the typeAheadPointer visually down the list by
+     * adding the current index by one.
+     * @return {void}
+     */
+    typeAheadDown() {
+      if (this.typeAheadPointer < this.filteredOptions.length - 1) {
+        this.typeAheadPointer++
+        if( this.maybeAdjustScroll ) {
+          this.maybeAdjustScroll()
+        }
+      }
+    },
+
+    /**
+     * Select the option at the current typeAheadPointer position.
+     * Optionally clear the search input on selection.
+     * @return {void}
+     */
+    typeAheadSelect() {
+      if( this.filteredOptions[ this.typeAheadPointer ] ) {
+        this.select( this.filteredOptions[ this.typeAheadPointer ] );
+      } else if (this.taggable && this.search.length){
+        this.select(this.search)
+      }
+
+      if( this.clearSearchOnSelect ) {
+        this.search = "";
+      }
+    },
+  }
+}