- move mutableLoading data property to ajax mixin

sagalbot · sagalbot · commit bae486a8e376 · 2017-03-22T18:33:32.000-07:00
- open dropdown only when not loading
- add watcher to keep loading synced with mutableLoading
diff --git 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
@@ -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
@@ -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', () => {
