Merge pull request #162 from sagalbot/fix-loading-regression

Fix loading regression

src/components/Select.vue

@@ -1,13 +1,13 @@
 <style>
   .v-select {
     position: relative;
+    font-family: sans-serif;
   }
   .v-select,
   .v-select * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    font-family: sans-serif;
   }
   /* Open Indicator */
   .v-select .open-indicator {
@@ -76,6 +76,7 @@
     cursor: pointer;
   }
   .v-select.open .dropdown-toggle {
+    border-bottom-color: transparent;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
@@ -91,10 +92,12 @@
     width: 100%;
     overflow-y: scroll;
     border: 1px solid rgba(0, 0, 0, .26);
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,.15);
     border-top: none;
     border-radius: 0 0 4px 4px;
     text-align: left;
     list-style: none;
+    background: #fff;
   }
   .v-select .no-options {
     text-align: center;

src/mixins/ajax.js

@@ -33,9 +33,10 @@ module.exports = {
 		 * invoke the onSearch callback.
 		 */
 		search() {
-			if (this.search.length > 0 && this.onSearch) {
+			if (this.search.length > 0) {
 				this.onSearch(this.search, this.toggleLoading)
-			}
+        this.$emit('search', this.search, this.toggleLoading)
+      }
 		},
 	},
 
@@ -49,9 +50,9 @@ module.exports = {
 		 */
 		toggleLoading(toggle = null) {
 			if (toggle == null) {
-				return this.showLoading = !this.showLoading
+				return this.mutableLoading = !this.mutableLoading
 			}
-			return this.showLoading = toggle
+			return this.mutableLoading = toggle
 		}
 	}
 }

test/unit/specs/Select.spec.js

@@ -931,10 +931,10 @@ describe('Select.vue', () => {
 			}).$mount()
 
 			vm.$refs.select.toggleLoading()
-			expect(vm.$refs.select.showLoading).toEqual(true)
+			expect(vm.$refs.select.mutableLoading).toEqual(true)
 
 			vm.$refs.select.toggleLoading(true)
-			expect(vm.$refs.select.showLoading).toEqual(true)
+			expect(vm.$refs.select.mutableLoading).toEqual(true)
 		})
 
 		it('should trigger the onSearch callback when the search text changes', (done) => {
@@ -980,6 +980,49 @@ describe('Select.vue', () => {
 			})
 		})
 
+    it('should trigger the search event when the search text changes', (done) => {
+      const vm = new Vue({
+        template: '<div><v-select ref="select" @search="foo"></v-select></div>',
+        data: {
+          called: false
+        },
+        methods: {
+          foo(val) {
+            this.called = val
+          }
+        }
+      }).$mount()
+
+      vm.$refs.select.search = 'foo'
+
+      Vue.nextTick(() => {
+        expect(vm.called).toEqual('foo')
+        done()
+      })
+    })
+
+    it('should not trigger the search event if the search text is empty', (done) => {
+      const vm = new Vue({
+        template: '<div><v-select ref="select" search="foo" @search="foo"></v-select></div>',
+        data: { called: false },
+        methods: {
+          foo(val) {
+            this.called = ! this.called
+          }
+        }
+      }).$mount()
+
+      vm.$refs.select.search = 'foo'
+      Vue.nextTick(() => {
+        expect(vm.called).toBe(true)
+        vm.$refs.select.search = ''
+        Vue.nextTick(() => {
+          expect(vm.called).toBe(true)
+          done()
+        })
+      })
+    })
+
 		it('can set loading to false from the onSearch callback', (done) => {
 			const vm = new Vue({
 				template: '<div><v-select loading ref="select" :on-search="foo"></v-select></div>',
@@ -992,7 +1035,7 @@ describe('Select.vue', () => {
 
 			vm.$refs.select.search = 'foo'
 			Vue.nextTick(() => {
-				expect(vm.$refs.select.showLoading).toEqual(false)
+				expect(vm.$refs.select.mutableLoading).toEqual(false)
 				done()
 			})
 		})
@@ -1011,7 +1054,7 @@ describe('Select.vue', () => {
 			select.onSearch(select.search, select.toggleLoading)
 
 			Vue.nextTick(() => {
-				expect(vm.$refs.select.showLoading).toEqual(true)
+				expect(vm.$refs.select.mutableLoading).toEqual(true)
 				done()
 			})
 		})