From bae486a8e3769dcfbd3510607efe04650d2e4b99 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Wed, 22 Mar 2017 18:33:32 -0700
Subject: [PATCH 1/2] - move mutableLoading data property to ajax mixin - open
 dropdown only when not loading - add watcher to keep loading synced with
 mutableLoading

---
 src/components/Select.vue      |  5 ++---
 src/mixins/ajax.js             | 14 ++++++++++++++
 test/unit/specs/Select.spec.js | 12 ++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 472b8a4..1bb43ac 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -488,8 +488,7 @@
         search: '',
         open: false,
         mutableValue: null,
-        mutableOptions: [],
-				mutableLoading: false
+        mutableOptions: []
       }
     },
 
@@ -765,7 +764,7 @@
        * @return {Boolean} True if open
        */
       dropdownOpen() {
-        return this.noDrop ? false : this.open
+        return this.noDrop ? false : this.open && !this.mutableLoading
       },
 
       /**
diff --git a/src/mixins/ajax.js b/src/mixins/ajax.js
index b0c1787..b897053 100644
--- a/src/mixins/ajax.js
+++ b/src/mixins/ajax.js
@@ -27,6 +27,12 @@ module.exports = {
 		}
 	},
 
+	data() {
+		return {
+      mutableLoading: false
+    }
+	},
+
 	watch: {
 		/**
 		 * If a callback & search text has been provided,
@@ -38,6 +44,14 @@ module.exports = {
         this.$emit('search', this.search, this.toggleLoading)
       }
 		},
+    /**
+		 * Sync the loading prop with the internal
+		 * mutable loading value.
+     * @param val
+     */
+		loading(val) {
+			this.mutableLoading = val
+		}
 	},
 
 	methods: {
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index 5abe705..bd5cff4 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -1058,6 +1058,18 @@ describe('Select.vue', () => {
 				done()
 			})
 		})
+
+		it('will sync mutable loading with the loading prop', (done) => {
+      const vm = new Vue({
+        template: '<div><v-select ref="select" :loading="loading"></v-select></div>',
+				data: {loading:false}
+      }).$mount()
+			vm.loading = true
+			Vue.nextTick(() => {
+      	expect(vm.$refs.select.mutableLoading).toEqual(true)
+				done()
+			})
+		})
 	})
 
 	describe('Reset on options change', () => {

From 8a17aef811e6131ed8913d3b94d2d46122467694 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Wed, 22 Mar 2017 18:35:12 -0700
Subject: [PATCH 2/2] better dev template for ajax

---
 dev.html   |  2 +-
 src/dev.js | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/dev.html b/dev.html
index a5cf401..31e56da 100644
--- a/dev.html
+++ b/dev.html
@@ -35,7 +35,7 @@
         <v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
         <v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
         <v-select placeholder="unsearchable" :options="options" :searchable="false"></v-select>
-        <v-select placeholder="loading" loading></v-select>
+        <v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
     </div>
 </body>
 
diff --git a/src/dev.js b/src/dev.js
index 4a619b4..50f02e3 100644
--- a/src/dev.js
+++ b/src/dev.js
@@ -1,6 +1,10 @@
 import Vue from 'vue'
 import vSelect from './components/Select.vue'
 import countries from 'docs/data/advanced.js'
+import debounce from 'lodash/debounce'
+import resource from 'vue-resource'
+
+Vue.use(resource)
 
 Vue.component('v-select', vSelect)
 
@@ -12,6 +16,19 @@ new Vue({
   data: {
     placeholder: "placeholder",
     value: null,
-    options: countries
+    options: countries,
+    ajaxRes: []
+  },
+  methods: {
+    search(search, loading) {
+      loading(true)
+      this.getRepositories(search, loading, this)
+    },
+    getRepositories: debounce((search, loading, vm) => {
+      vm.$http.get(`https://api.github.com/search/repositories?q=${search}`).then(res => {
+        vm.ajaxRes = res.data.items
+        loading(false)
+      })
+    }, 250)
   }
 })