From 07eb7b1b8f2c411134f46b66543db920a7243383 Mon Sep 17 00:00:00 2001
From: Simone Todaro <simone@cyber-duck.co.uk>
Date: Wed, 17 Jan 2018 20:26:39 +0000
Subject: [PATCH 01/28] Allow user to specify the value property when options
 are objects

---
 src/components/Select.vue | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 83c14a9..53c7cc3 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -499,6 +499,16 @@
         default: 'label'
       },
 
+      /**
+       * Tells vue-select what key to use when generating option
+       * values when each `option` is an object.
+       * @type {String}
+       */
+      index: {
+        type: String,
+        default: null
+      },
+
       /**
        * Callback to generate the label text. If {option}
        * is an object, returns option[this.label] by default.
@@ -521,6 +531,15 @@
               return option[this.label]
             }
           }
+          if(this.index) {
+            let label = option
+            this.options.forEach((val) => {
+              if (val[this.index] == option) {
+                label = val[this.label]
+              }
+            })
+            return label
+          }
           return option;
         }
       },
@@ -765,7 +784,15 @@
           if (this.taggable && !this.optionExists(option)) {
             option = this.createOption(option)
           }
-
+          if(this.index) {
+            if (!option.hasOwnProperty(this.index)) {
+              console.warn(
+                `[vue-select warn]: Index key "option.${this.index}" does not` +
+                ` exist in options object ${JSON.stringify(option)}.\n`;
+              )
+            }
+            option  = option[this.index]
+          }
           if (this.multiple && !this.mutableValue) {
             this.mutableValue = [option]
           } else if (this.multiple) {
@@ -787,7 +814,7 @@
         if (this.multiple) {
           let ref = -1
           this.mutableValue.forEach((val) => {
-            if (val === option || typeof val === 'object' && val[this.label] === option[this.label]) {
+            if (val === option || (this.index && val === option[this.index]) || (typeof val === 'object' && val[this.label] === option[this.label])) {
               ref = val
             }
           })

From d1de8da59f11903927eaf58cf7590e9c50f8989b Mon Sep 17 00:00:00 2001
From: Simone Todaro <simone@cyber-duck.co.uk>
Date: Wed, 17 Jan 2018 21:03:12 +0000
Subject: [PATCH 02/28] Update documentation

---
 docs/gitbook/Basics/Options.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/docs/gitbook/Basics/Options.md b/docs/gitbook/Basics/Options.md
index 0eeb671..6269732 100644
--- a/docs/gitbook/Basics/Options.md
+++ b/docs/gitbook/Basics/Options.md
@@ -33,6 +33,27 @@ If you wanted to display `Canada` in the dropdown, you'd use the `countryName` k
 
 [](codepen://sagalbot/aEjLPB?height=500)
 
+
+### Option index {#values}
+
+When the `options` array contains objects, `vue-select` returns the whole object as dropdown value upon selection. You can specify your own `index` prop to return only the value contained in the specific property.
+
+For example, consider an object with `value` and `label` properties:
+
+```json
+{
+  value: "CA",
+  label: "Canada"
+}
+```
+
+If you wanted to return `CA` in the dropdown when `Canada` is selected, you'd use the `index` key:
+
+```html
+<v-select index="value" :options="countries"></v-select>
+```
+
+
 ### Null / Empty Options {#emptyOptions}
 
 `vue-select` requires the `option` property to be an `array`. If you are using Vue in development mode, you will get warnings attempting to pass anything other than an `array` to the `options` prop. If you need a `null`/`empty` value, use an empty array `[]`.

From 852890fe2ce1ede7ae018ac3d54d07f6cd916a5f Mon Sep 17 00:00:00 2001
From: Simone Todaro <simone@cyber-duck.co.uk>
Date: Wed, 17 Jan 2018 22:02:11 +0000
Subject: [PATCH 03/28] Fix typo

---
 src/components/Select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 53c7cc3..ae01e1a 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -788,7 +788,7 @@
             if (!option.hasOwnProperty(this.index)) {
               console.warn(
                 `[vue-select warn]: Index key "option.${this.index}" does not` +
-                ` exist in options object ${JSON.stringify(option)}.\n`;
+                ` exist in options object ${JSON.stringify(option)}.`
               )
             }
             option  = option[this.index]

From f5557bcd786393cd34ddf3e4090685e161725a16 Mon Sep 17 00:00:00 2001
From: Simone Todaro <simone@cyber-duck.co.uk>
Date: Wed, 17 Jan 2018 22:08:35 +0000
Subject: [PATCH 04/28] Move console warning

---
 src/components/Select.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index ae01e1a..c4285c8 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -527,6 +527,16 @@
                 'http://sagalbot.github.io/vue-select/#ex-labels'
               )
             }
+
+            if(this.index) {
+              if (!option.hasOwnProperty(this.index)) {
+                console.warn(
+                  `[vue-select warn]: Index key "option.${this.index}" does not` +
+                  ` exist in options object ${JSON.stringify(option)}.`
+                )
+              }
+            }
+
             if (this.label && option[this.label]) {
               return option[this.label]
             }
@@ -785,12 +795,6 @@
             option = this.createOption(option)
           }
           if(this.index) {
-            if (!option.hasOwnProperty(this.index)) {
-              console.warn(
-                `[vue-select warn]: Index key "option.${this.index}" does not` +
-                ` exist in options object ${JSON.stringify(option)}.`
-              )
-            }
             option  = option[this.index]
           }
           if (this.multiple && !this.mutableValue) {

From 76a90246d8bf6d223cc7c4ed14b4b258a51a23b5 Mon Sep 17 00:00:00 2001
From: Simone Todaro <simone@cyber-duck.co.uk>
Date: Wed, 17 Jan 2018 22:09:05 +0000
Subject: [PATCH 05/28] Add tests

---
 test/unit/specs/Select.spec.js | 124 +++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)

diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index 8aa1e82..4f98e92 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -837,6 +837,130 @@ describe('Select.vue', () => {
 		})
 	})
 
+	describe('When index prop is defined', () => {
+		it('can accept an array of objects and pre-selected value (single)', () => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options" :value="value"></v-select></div>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: 'foo',
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			expect(vm.$children[0].mutableValue).toEqual(vm.value)
+		})
+
+		it('can accept an array of objects and pre-selected values (multiple)', () => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: ['foo', 'bar'],
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			expect(vm.$children[0].mutableValue).toEqual(vm.value)
+		})
+
+		it('can deselect a pre-selected object', () => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
+				data: {
+					index: 'value',
+					value: ['foo', 'bar'],
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			vm.$children[0].select('foo')
+			expect(vm.$children[0].mutableValue.length).toEqual(1)
+		})
+
+		it('can deselect an option when multiple is false', () => {
+			const vm = new Vue({
+				template: `<div><v-select :index="index" :options="options" :value="value"></v-select></div>`,
+				data: {
+					index: 'value',
+					value: 'foo',
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
+				}
+			}).$mount()
+			vm.$children[0].select('foo')
+			expect(vm.$children[0].mutableValue).toEqual(null)
+		})
+
+		it('can use v-model syntax for a two way binding to a parent component', (done) => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options" v-model="value"></v-select></div>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: 'foo',
+					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}, {label: 'This is Baz', value: 'baz'}]
+				}
+			}).$mount()
+
+			expect(vm.$children[0].value).toEqual('foo')
+			expect(vm.$children[0].mutableValue).toEqual('foo')
+
+			vm.$children[0].mutableValue = 'bar'
+
+			Vue.nextTick(() => {
+				expect(vm.value).toEqual('bar')
+				done()
+			})
+		}),
+
+		it('can generate labels using a custom label key', () => {
+			const vm = new Vue({
+				template: '<div><v-select :index="index" label="name" :options="options" v-model="value" :multiple="true"></v-select></div>',
+				components: {vSelect},
+				data: {
+					index: 'value',
+					value: ['baz'],
+					options: [{value: 'foo', name: 'Foo'}, {value: 'baz', name: 'Baz'}]
+				}
+			}).$mount()
+			expect(vm.$children[0].$refs.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
+		})
+
+		it('will console.warn when options contain objects without a valid index key', (done) => {
+			spyOn(console, 'warn')
+			const vm = new Vue({
+				template: '<div><v-select :index="index" :options="options"></v-select></div>',
+				data: {
+					index: 'value',
+					options: [{label: 'Foo'}]
+				}
+			}).$mount()
+			vm.$children[0].open = true
+			Vue.nextTick(() => {
+				expect(console.warn).toHaveBeenCalledWith(
+                	`[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
+				)
+				done()
+			})
+		})
+
+		it('will not console.warn when options contain objects without an index key', (done) => {
+			spyOn(console, 'warn')
+			const vm = new Vue({
+				template: '<div><v-select :options="options"></v-select></div>',
+				data: {
+					options: [{label: 'Foo'}]
+				}
+			}).$mount()
+			vm.$children[0].open = true
+			Vue.nextTick(() => {
+				expect(console.warn).not.toHaveBeenCalledWith(
+                	`[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
+				)
+				done()
+			})
+		})
+	})
+
 	describe('When Tagging Is Enabled', () => {
 		it('can determine if a given option string already exists', () => {
 			const vm = new Vue({

From 79893024b51f470b5e153d77fa18a3d60037fb7a Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Sun, 28 Jan 2018 17:41:32 -0800
Subject: [PATCH 06/28] - update getOptionLabel to be consistent when using
 `index` - move index warning from getOptionLabel to `select` method - update
 isOptionSelected, pull up object comparator to it's own method - add test
 edge cases

---
 src/components/Select.vue      | 103 ++++++++++++--------
 test/unit/specs/Select.spec.js | 166 ++++++++++++++++++++++++++-------
 2 files changed, 195 insertions(+), 74 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index fd15431..33ab63e 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -346,13 +346,13 @@
               aria-label="Search for option"
       >
 
-      <button 
-        v-show="showClearButton" 
-        :disabled="disabled" 
+      <button
+        v-show="showClearButton"
+        :disabled="disabled"
         @click="clearSelection"
-        type="button" 
-        class="clear" 
-        title="Clear selection" 
+        type="button"
+        class="clear"
+        title="Clear selection"
       >
         <span aria-hidden="true">&times;</span>
       </button>
@@ -512,6 +512,12 @@
       /**
        * Callback to generate the label text. If {option}
        * is an object, returns option[this.label] by default.
+       *
+       * Label text is used for filtering comparison and
+       * displaying. If you only need to adjust the
+       * display, you should use the `option` and
+       * `selected-option` slots.
+       *
        * @type {Function}
        * @param  {Object || String} option
        * @return {String}
@@ -519,6 +525,10 @@
       getOptionLabel: {
         type: Function,
         default(option) {
+          if( this.index ) {
+            option = this.findOptionByIndexValue(option)
+          }
+
           if (typeof option === 'object') {
             if (!option.hasOwnProperty(this.label)) {
               return console.warn(
@@ -527,28 +537,7 @@
                 'http://sagalbot.github.io/vue-select/#ex-labels'
               )
             }
-
-            if(this.index) {
-              if (!option.hasOwnProperty(this.index)) {
-                console.warn(
-                  `[vue-select warn]: Index key "option.${this.index}" does not` +
-                  ` exist in options object ${JSON.stringify(option)}.`
-                )
-              }
-            }
-
-            if (this.label && option[this.label]) {
-              return option[this.label]
-            }
-          }
-          if(this.index) {
-            let label = option
-            this.options.forEach((val) => {
-              if (val[this.index] == option) {
-                label = val[this.label]
-              }
-            })
-            return label
+            return option[this.label]
           }
           return option;
         }
@@ -793,7 +782,13 @@
             option = this.createOption(option)
           }
           if(this.index) {
-            option  = option[this.index]
+            if (!option.hasOwnProperty(this.index)) {
+              return console.warn(
+                  `[vue-select warn]: Index key "option.${this.index}" does not` +
+                  ` exist in options object ${JSON.stringify(option)}.`
+              )
+            }
+            option = option[this.index]
           }
           if (this.multiple && !this.mutableValue) {
             this.mutableValue = [option]
@@ -875,22 +870,50 @@
        * @return {Boolean}        True when selected | False otherwise
        */
       isOptionSelected(option) {
-        if (this.multiple && this.mutableValue) {
           let selected = false
-          this.mutableValue.forEach(opt => {
-            if (typeof opt === 'object' && opt[this.label] === option[this.label]) {
-              selected = true
-            } else if (typeof opt === 'object' && opt[this.label] === option) {
-              selected = true
-            }
-            else if (opt === option) {
+          this.valueAsArray.forEach(value => {
+            if (typeof value === 'object') {
+              selected = this.optionObjectComparator(value, option)
+            } else if (value === option || value === option[this.index]) {
               selected = true
             }
           })
           return selected
-        }
+      },
 
-        return this.mutableValue === option
+      /**
+       * Determine if two option objects are matching.
+       *
+       * @param value {Object}
+       * @param option {Object}
+       * @returns {boolean}
+       */
+      optionObjectComparator(value, option) {
+        if (this.index && value === option[this.index]) {
+          return true
+        } else if ((value[this.label] === option[this.label]) || (value[this.label] === option)) {
+          return true
+        } else if (this.index && value[this.index] === option[this.index]) {
+          return true
+        }
+        return false;
+      },
+
+      /**
+       * Finds an option from this.options
+       * where option[this.index] matches
+       * the passed in value.
+       *
+       * @param value {Object}
+       * @returns {*}
+       */
+      findOptionByIndexValue(value) {
+        this.options.forEach(_option => {
+          if (JSON.stringify(_option[this.index]) === JSON.stringify(value)) {
+            value = _option
+          }
+        })
+        return value
       },
 
       /**
@@ -1070,7 +1093,7 @@
        * @return {Array}
        */
       valueAsArray() {
-        if (this.multiple) {
+        if (this.multiple && this.mutableValue) {
           return this.mutableValue
         } else if (this.mutableValue) {
           return [].concat(this.mutableValue)
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index 72cab14..fe1cd33 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -851,6 +851,45 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableValue).toEqual(vm.value)
 		})
 
+    it('can determine if an object is pre-selected', () => {
+      const vm = new Vue({
+        template: '<div><v-select :options="options" v-model="value" index="id"></v-select></div>',
+        components: {vSelect},
+        data: {
+          value: 'foo',
+          options: [{
+          	id: 'foo',
+						label: 'This is Foo'
+					}]
+        }
+      }).$mount()
+
+      expect(vm.$children[0].isOptionSelected({
+        id: 'foo',
+        label: 'This is Foo'
+      })).toEqual(true)
+    })
+
+    it('can determine if an object is selected after it has been chosen', () => {
+      const vm = new Vue({
+        template: '<div><v-select :options="options" index="id"></v-select></div>',
+        components: {vSelect},
+				data: {
+        	options: [{id: 'foo', label: 'FooBar'}]
+				}
+      }).$mount()
+
+			vm.$children[0].select({id: 'foo', label: 'FooBar'});
+
+      // Vue.nextTick(() => {
+        expect(vm.$children[0].isOptionSelected({
+          id: 'foo',
+          label: 'This is Foo'
+        })).toEqual(true)
+				// done()
+			// })
+    })
+
 		it('can accept an array of objects and pre-selected values (multiple)', () => {
 			const vm = new Vue({
 				template: '<div><v-select :index="index" :options="options" :value="value" :multiple="true"></v-select></div>',
@@ -873,8 +912,9 @@ describe('Select.vue', () => {
 					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
 				}
 			}).$mount()
-			vm.$children[0].select('foo')
+			vm.$children[0].deselect('foo')
 			expect(vm.$children[0].mutableValue.length).toEqual(1)
+			expect(vm.$children[0].mutableValue).toEqual(['bar'])
 		})
 
 		it('can deselect an option when multiple is false', () => {
@@ -886,7 +926,7 @@ describe('Select.vue', () => {
 					options: [{label: 'This is Foo', value: 'foo'}, {label: 'This is Bar', value: 'bar'}]
 				}
 			}).$mount()
-			vm.$children[0].select('foo')
+			vm.$children[0].deselect('foo')
 			expect(vm.$children[0].mutableValue).toEqual(null)
 		})
 
@@ -925,39 +965,97 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].$refs.toggle.querySelector('.selected-tag').textContent).toContain('Baz')
 		})
 
-		it('will console.warn when options contain objects without a valid index key', (done) => {
-			spyOn(console, 'warn')
-			const vm = new Vue({
-				template: '<div><v-select :index="index" :options="options"></v-select></div>',
-				data: {
-					index: 'value',
-					options: [{label: 'Foo'}]
-				}
-			}).$mount()
-			vm.$children[0].open = true
-			Vue.nextTick(() => {
-				expect(console.warn).toHaveBeenCalledWith(
-                	`[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
-				)
-				done()
-			})
+    it('will console.warn when attempting to select an option with an undefined index', () => {
+      spyOn(console, 'warn')
+
+      const vm = new Vue({
+        template: '<div><v-select index="value" :options="options"></v-select></div>',
+        data: {
+          options: [{label: 'Foo'}]
+        }
+      }).$mount()
+      vm.$children[0].select({label: 'Foo'})
+      expect(console.warn).toHaveBeenCalledWith(
+          `[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
+      )
+    })
+
+		it('can find the original option within this.options', () => {
+      const vm = new Vue({
+        template: '<div><v-select index="id" :options="options"></v-select></div>',
+        data: {
+          options: [{id: 1, label: 'Foo'},{id:2, label: 'Bar'}]
+        }
+      }).$mount()
+
+			expect(vm.$children[0].findOptionByIndexValue(1)).toEqual({id: 1, label: 'Foo'})
+			expect(vm.$children[0].findOptionByIndexValue({id: 1, label: 'Foo'})).toEqual({id: 1, label: 'Foo'})
 		})
 
-		it('will not console.warn when options contain objects without an index key', (done) => {
-			spyOn(console, 'warn')
-			const vm = new Vue({
-				template: '<div><v-select :options="options"></v-select></div>',
-				data: {
-					options: [{label: 'Foo'}]
-				}
-			}).$mount()
-			vm.$children[0].open = true
-			Vue.nextTick(() => {
-				expect(console.warn).not.toHaveBeenCalledWith(
-                	`[vue-select warn]: Index key "option.value" does not exist in options object {"label":"Foo"}.`
-				)
-				done()
+		describe('And when option[index] is a nested object', () => {
+			it('can determine if an object is pre-selected', () => {
+        const nestedOption = {
+          value: {
+            nested: true
+          },
+          label: 'foo'
+        };
+        const vm = new Vue({
+          template: '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
+          components: {vSelect},
+          data: {
+            value: {
+              nested: true
+            },
+            options: [nestedOption]
+          }
+        }).$mount()
+        expect(vm.$children[0].isOptionSelected({
+          nested: true
+        })).toEqual(true)
 			})
+
+			it('can determine if an object is selected after it is chosen', () => {
+        const nestedOption = {
+          value: {
+            nested: true
+          },
+          label: 'foo'
+        };
+        const vm = new Vue({
+          template: '<div><v-select index="value" :options="options"></v-select></div>',
+          components: {vSelect},
+          data: {
+            options: [nestedOption]
+          }
+        }).$mount()
+				vm.$children[0].select(nestedOption)
+        expect(vm.$children[0].isOptionSelected(nestedOption)).toEqual(true)
+			})
+
+      it('can determine a selected values label', () => {
+        const nestedOption = {
+          value: {
+            nested: true
+          },
+          label: 'foo'
+        };
+        const vm = new Vue({
+          template: '<div><v-select index="value" :options="options" :value="value"></v-select></div>',
+          components: {vSelect},
+          data: {
+            value: {
+              nested: true
+            },
+            options: [nestedOption]
+          }
+        }).$mount()
+
+        expect(vm.$children[0].getOptionLabel({
+          nested: true
+        })).toEqual('foo')
+      })
+
 		})
 	})
 
@@ -1501,7 +1599,7 @@ describe('Select.vue', () => {
 					value: 'foo'
 				}
 			}).$mount()
-			
+
 			expect(vm.mutableValue).toEqual('foo')
 			vm.$el.querySelector( 'button.clear' ).click()
 			expect(vm.mutableValue).toEqual(null)
@@ -1520,6 +1618,6 @@ describe('Select.vue', () => {
 			const buttonEl = vm.$el.querySelector( 'button.clear' )
 			expect(buttonEl.disabled).toEqual(true);
 		})
-	
+
 	});
 })

From b92428101f1c6d4aa1fe864a88eb7079c245e009 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Sun, 28 Jan 2018 17:54:25 -0800
Subject: [PATCH 07/28] fix isValueEmpty bug when working with integers

---
 src/components/Select.vue      |  4 ++--
 test/unit/specs/Select.spec.js | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 33ab63e..57e626a 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1080,9 +1080,9 @@
       isValueEmpty() {
         if (this.mutableValue) {
           if (typeof this.mutableValue === 'object') {
-            return !Object.keys(this.mutableValue).length
+            return ! Object.keys(this.mutableValue).length
           }
-          return !this.mutableValue.length
+          return ! this.valueAsArray.length
         }
 
         return true;
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index fe1cd33..54fd3e9 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -249,7 +249,20 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].isOptionSelected('foo')).toEqual(true)
 		}),
 
-		describe('change Event', () => {
+		it('can work with an array of integers', () => {
+			const vm = new Vue({
+				template: '<div><v-select :options="[1,2,3,4,5]" v-model="value"></v-select></div>',
+				components: {vSelect},
+				data: {
+					value: 5,
+				}
+			}).$mount()
+
+			expect(vm.$children[0].isOptionSelected(5)).toEqual(true)
+			expect(vm.$children[0].isValueEmpty).toEqual(false)
+		})
+
+    describe('change Event', () => {
 			it('will trigger the input event when the selection changes', (done) => {
 				const vm = new Vue({
 					template: `<div><v-select ref="select"  :value="['foo']" :options="['foo','bar','baz']" v-on:input="foo = arguments[0]"></v-select></div>`,
@@ -1564,7 +1577,7 @@ describe('Select.vue', () => {
 		})
 	})
 
-	describe( 'Clear button', () => {
+	describe('Clear button', () => {
 
 		it( 'should be displayed on single select when value is selected', () => {
 			const VueSelect = Vue.extend( vSelect )

From 1ba47798ee6373cd4bcdae1c894bbae97363cf5a Mon Sep 17 00:00:00 2001
From: Denis Golubkov <golubkovden@gmail.com>
Date: Fri, 9 Feb 2018 14:53:58 +0300
Subject: [PATCH 08/28] Update README.md

Added link to github page
---
 docs/gitbook/README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/gitbook/README.md b/docs/gitbook/README.md
index e6810a8..26e8d9a 100644
--- a/docs/gitbook/README.md
+++ b/docs/gitbook/README.md
@@ -22,4 +22,5 @@
 
 #### Resources
 - **[CodePen Template](http://codepen.io/sagalbot/pen/NpwrQO)**
-- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
\ No newline at end of file
+- **[Trello Roadmap](https://trello.com/b/vWvITNzS/vue-select)**
+- **[GitHub](https://github.com/sagalbot/vue-select)**

From 970d1da3c2fbcefeadb2ee8910cd383c98f56032 Mon Sep 17 00:00:00 2001
From: Erik Nygren <erik.nygren6@gmail.com>
Date: Wed, 18 Apr 2018 13:04:22 +0100
Subject: [PATCH 09/28] Fixing unexpected linebreak on single selects

What
---
- Hiding the search input field if the component is in the single value
option.
- Making the search input field full width if no options are selected in
	either single or multi select mode.
- Shrinking it to width auto if there are selected entries in multi
	mode.
Why
---
The component broke into two lines when selecting a a value in single
mode, because an empty, non-interactable input field was pushed down to
the next row if the selected entry had a long label.
---
 src/components/Select.vue      | 25 +++++++++++++-
 test/unit/specs/Select.spec.js | 59 +++++++++++++++++++++++++++++++++-
 2 files changed, 82 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index a0e4ffa..e8710f6 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -73,6 +73,7 @@
     padding: 0;
     background: none;
     border: 1px solid rgba(60, 60, 60, .26);
+    min-height: 36px;
     border-radius: 4px;
     white-space: normal;
   }
@@ -213,6 +214,16 @@
   .v-select.unsearchable input[type="search"]:hover {
     cursor: pointer;
   }
+  .v-select input[type="search"].hidden {
+    display: none;
+  }
+  .v-select input[type="search"].shrunk {
+    width: auto;
+  }
+  .v-select input[type="search"].empty {
+    width: 100%;
+  }
+
     /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
@@ -336,12 +347,12 @@
               @focus="onSearchFocus"
               type="search"
               class="form-control"
+              :class="inputClasses"
               autocomplete="off"
               :disabled="disabled"
               :placeholder="searchPlaceholder"
               :tabindex="tabindex"
               :readonly="!searchable"
-              :style="{ width: isValueEmpty ? '100%' : 'auto' }"
               :id="inputId"
               aria-label="Search for option"
       >
@@ -972,6 +983,18 @@
         }
       },
 
+      /**
+       * Classes to be output on input.form-control
+       * @return {Object}
+       */
+      inputClasses() {
+        return {
+          hidden: !this.multiple && !this.isValueEmpty,
+          shrunk: this.multiple && !this.isValueEmpty,
+          empty: this.isValueEmpty,
+        }
+      },
+
       /**
        * If search text should clear on blur
        * @return {Boolean} True when single and clearSearchOnSelect
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index f67dcc5..e2d152d 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -249,6 +249,36 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].isOptionSelected('foo')).toEqual(true)
 		}),
 
+    it('applies the "empty" class to the search input when no value is selected', () => {
+      const vm = new Vue({
+        template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
+        components: {vSelect},
+        data: {
+          value: null,
+          options: [{label: 'one'}]
+        }
+      }).$mount()
+
+      expect(vm.$children[0].inputClasses.empty).toEqual(true)
+      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
+    }),
+
+    it('applies the "shrunk" class to the search input when one or more value is selected', () => {
+      const vm = new Vue({
+        template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
+        components: {vSelect},
+        data: {
+          value: [{label: 'one'}],
+          options: [{label: 'one'}]
+        }
+      }).$mount()
+
+      expect(vm.$children[0].inputClasses.shrunk).toEqual(true)
+      expect(vm.$children[0].inputClasses.empty).toEqual(false)
+      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
+    }),
+
 		describe('change Event', () => {
 			it('will trigger the input event when the selection changes', (done) => {
 				const vm = new Vue({
@@ -1318,7 +1348,34 @@ describe('Select.vue', () => {
 				expect(vm.$refs.select.search).toEqual('')
 				done()
 			})
-		})
+    })
+
+    it('should apply the "empty" class to the search input when it does not have a selected value', () => {
+      const vm = new Vue({
+        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
+        data: {
+          value: '',
+          options: ['one', 'two', 'three']
+        }
+      }).$mount()
+      expect(vm.$children[0].inputClasses.empty).toEqual(true)
+      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
+    })
+
+    it('should apply the "hidden" class to the search input when a value is present', () => {
+      const vm = new Vue({
+        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
+        data: {
+          value: 'one',
+          options: ['one', 'two', 'three']
+        }
+      }).$mount()
+
+      expect(vm.$children[0].inputClasses.hidden).toEqual(true)
+      expect(vm.$children[0].inputClasses.empty).toEqual(false)
+      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+    })
 
 		it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
 			const vm = new Vue({

From 68a14d4d6caa06ffa59b6fd37211342a4965a635 Mon Sep 17 00:00:00 2001
From: ldrovira <31676496+luisDanielRoviraContreras@users.noreply.github.com>
Date: Sun, 6 May 2018 12:46:17 -0400
Subject: [PATCH 10/28] Add license in README.md

---
 README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/README.md b/README.md
index 246679c..503f845 100644
--- a/README.md
+++ b/README.md
@@ -104,3 +104,7 @@ When provided an array of objects, `vue-select` will display a single value of t
 ```
 
 ### For more information, please visit the [vue-select documentation.](https://sagalbot.github.io/vue-select)
+
+## License
+
+[MIT](https://github.com/sagalbot/vue-select/blob/master/LICENSE.md)

From d2efc965f936344ae020912ad1a51967b7ebbb47 Mon Sep 17 00:00:00 2001
From: Kevin Ball <kmball11@gmail.com>
Date: Tue, 5 Jun 2018 15:47:52 -0700
Subject: [PATCH 11/28] Add select on tab option and example

---
 dev/dev.html              |  3 ++-
 src/components/Select.vue | 31 +++++++++++++++++++++++++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/dev/dev.html b/dev/dev.html
index fe481cb..c75ec22 100644
--- a/dev/dev.html
+++ b/dev/dev.html
@@ -9,7 +9,7 @@
     <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
     <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
     <style>
-        
+
         #app {
             height: 95vh;
             display: flex;
@@ -68,6 +68,7 @@
             </span>
         </v-select>
 
+        <v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
         <v-select placeholder="disabled" disabled  value="disabled"></v-select>
         <v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
         <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
diff --git a/src/components/Select.vue b/src/components/Select.vue
index a0e4ffa..b07da63 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -329,6 +329,7 @@
               v-model="search"
               @keydown.delete="maybeDeleteValue"
               @keyup.esc="onEscape"
+              @keydown.tab="onTab"
               @keydown.up.prevent="typeAheadUp"
               @keydown.down.prevent="typeAheadDown"
               @keydown.enter.prevent="typeAheadSelect"
@@ -346,13 +347,13 @@
               aria-label="Search for option"
       >
 
-      <button 
-        v-show="showClearButton" 
-        :disabled="disabled" 
+      <button
+        v-show="showClearButton"
+        :disabled="disabled"
         @click="clearSelection"
-        type="button" 
-        class="clear" 
-        title="Clear selection" 
+        type="button"
+        class="clear"
+        title="Clear selection"
       >
         <span aria-hidden="true">&times;</span>
       </button>
@@ -680,6 +681,14 @@
         type: String,
         default: 'auto'
       },
+      /**
+       * When true, hitting the 'tab' key will select the current select value
+       * @type {Boolean}
+       */
+      selectOnTab: {
+        type: Boolean,
+        default: false
+      }
     },
 
     data() {
@@ -918,6 +927,16 @@
         }
       },
 
+      /**
+       * Select the current value if selectOnTab is enabled
+       * @return {void}
+       */
+      onTab() {
+        if (this.selectOnTab) {
+          this.typeAheadSelect();
+        }
+      },
+
       /**
        * Determine if an option exists
        * within this.mutableOptions array.

From 62adbb47b69fabb390ef4bfa9ee8a77bc11b6dce Mon Sep 17 00:00:00 2001
From: Todd Baur <todd@toadkicker.com>
Date: Thu, 7 Jun 2018 21:01:59 +0900
Subject: [PATCH 12/28] allow component to inherit font family choices

I ran into this issue where the component was using the browser's default san-serif font, which of course we don't use. This will allow it to just take the font from the application its used in and continue on without much friction.
---
 src/components/Select.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index a0e4ffa..c7014ec 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,7 +1,7 @@
 <style>
   .v-select {
     position: relative;
-    font-family: sans-serif;
+    font-family: inherit;
   }
 
   .v-select,

From 16b6bd7d09708b8637125571e46d28031478f83c Mon Sep 17 00:00:00 2001
From: Erik Nygren <erik.nygren6@gmail.com>
Date: Fri, 15 Jun 2018 18:58:05 +0100
Subject: [PATCH 13/28] Fix hidden input when reselecting in single mode

What
---
- Removing hidden class from single inputs when the dropdown is hidden.
- Changing from `display:none` to zero width when hiding the input.

Why
---
Because the user will be typing for another element if reopening the
dropdown, which we need to allow.
---
 src/components/Select.vue      |  5 +++--
 test/unit/specs/Select.spec.js | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index e8710f6..056c321 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -215,7 +215,8 @@
     cursor: pointer;
   }
   .v-select input[type="search"].hidden {
-    display: none;
+    width: 0px;
+    padding: 0;
   }
   .v-select input[type="search"].shrunk {
     width: auto;
@@ -989,7 +990,7 @@
        */
       inputClasses() {
         return {
-          hidden: !this.multiple && !this.isValueEmpty,
+          hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
           shrunk: this.multiple && !this.isValueEmpty,
           empty: this.isValueEmpty,
         }
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index e2d152d..348382f 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -1377,6 +1377,28 @@ describe('Select.vue', () => {
       expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
     })
 
+
+    it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', () => {
+      const vm = new Vue({
+        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
+        data: {
+          value: 'one',
+          options: ['one', 'two', 'three'],
+          open: true
+        }
+      }).$mount()
+      vm.$children[0].toggleDropdown({target: vm.$children[0].$refs.search})
+      Vue.nextTick(() => {
+        Vue.nextTick(() => {
+          expect(vm.$children[0].open).toEqual(true)
+          expect(vm.$children[0].inputClasses.hidden).toEqual(false)
+          expect(vm.$children[0].inputClasses.empty).toEqual(false)
+          expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
+          done()
+        })
+      })
+    })
+
 		it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
 			const vm = new Vue({
 				template: '<div><v-select ref="select" :options="options" :value="value" :clear-search-on-select="false"></v-select></div>',

From fd32f503790c77f62e5f736b6db84b2d63ce3949 Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Wed, 4 Jul 2018 09:15:32 -0700
Subject: [PATCH 14/28] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 503f845..fa93261 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 > A native Vue.js select component that provides similar functionality to Select2 without the overhead of jQuery.
 
+Want to help out as a primary contributor? [Get in touch](https://github.com/sagalbot/vue-select/issues/581)!
+
 #### Features
 - AJAX Support
 - Tagging

From e926b6e007e72ddfb6c02aed51222c5514fdb06d Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Tue, 17 Jul 2018 22:59:44 -0400
Subject: [PATCH 15/28] Use a flexbox-based layout

This change move away from floats and absolute positioning in favor of
flexbox. Flexbox allows us to solve some of the more quirky issues we're
having with elements (e.g, the input) being too big, causing "extra line
breaks", vertical alignment of close buttons, etc... and simplified RTL
support!

I did need to introduce two new child elements to the `dropdown-toggle`
element. These are used to group all of the selected tags and the input
in one group. And the "actions" (clear button, dropdown indicator, and
spinner) in another. Doing so has the added benefit of no longer
allowing selected options from running "under" those other elements.

NOTE: The large blocks of change are due to white space differences from
indenting inside those new wrapper elements. View the diff ignoring
white space to see a more accurate representation of the change here.
---
 src/components/Select.vue | 189 ++++++++++++++++++++------------------
 1 file changed, 99 insertions(+), 90 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 2abeafa..d7219ac 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -3,42 +3,45 @@
     position: relative;
     font-family: inherit;
   }
-
   .v-select,
   .v-select * {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
-  /* Rtl support */
-  .v-select.rtl .open-indicator {
-    left: 10px;
-    right: auto;
+
+  /* Rtl support - Because we're using a flexbox-based layout, the `dir="rtl"` HTML
+     attribute does most of the work for us by rearranging the child elements visually.
+   */
+  .v-select[dir="rtl"] .v-select__actions {
+    padding: 0 3px 0 6px;
   }
-  .v-select.rtl .selected-tag {
-    float: right;
+  .v-select[dir="rtl"] .dropdown-toggle .clear {
+    margin-left: 6px;
+    margin-right: 0;
+  }
+  .v-select[dir="rtl"] .selected-tag {
     margin-right: 3px;
     margin-left: 1px;
   }
-  .v-select.rtl .dropdown-menu {
+  .v-select[dir="rtl"] .selected-tag .close {
+    margin-left: 0;
+    margin-right: 2px;
+  }
+  .v-select[dir="rtl"] .dropdown-menu {
     text-align: right;
   }
-  .v-select.rtl .dropdown-toggle .clear {
-    left: 30px;
-    right: auto;
-  }
+
   /* Open Indicator */
   .v-select .open-indicator {
-    position: absolute;
-    bottom: 6px;
-    right: 10px;
     display: inline-block;
     cursor: pointer;
     pointer-events: all;
     transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
     opacity: 1;
-    height: 20px; width: 10px;
+    height: 16px;
+    width: 12px; /* To account for extra width from rotating. */
   }
   .v-select .open-indicator:before {
     border-color: rgba(60, 60, 60, .5);
@@ -48,7 +51,7 @@
     display: inline-block;
     height: 10px;
     width: 10px;
-    vertical-align: top;
+    vertical-align: text-top;
     transform: rotate(133deg);
     transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
@@ -64,16 +67,16 @@
   .v-select.open .open-indicator {
     bottom: 1px;
   }
+
   /* Dropdown Toggle */
   .v-select .dropdown-toggle {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    display: block;
+    display: flex;
     padding: 0;
     background: none;
     border: 1px solid rgba(60, 60, 60, .26);
-    min-height: 36px;
     border-radius: 4px;
     white-space: normal;
   }
@@ -85,12 +88,20 @@
     clear: both;
     height: 0;
   }
+  .v-select .v-select__selected-options {
+    display: flex;
+    flex-basis: 100%;
+    flex-grow: 1;
+    flex-wrap: wrap;
+  }
+  .v-select .v-select__actions {
+    display: flex;
+    align-items: center;
+    padding: 0 6px 0 3px;
+  }
 
   /* Clear Button */
   .v-select .dropdown-toggle .clear {
-    position: absolute;
-    bottom: 9px;
-    right: 30px;
     font-size: 23px;
     font-weight: 700;
     line-height: 1;
@@ -99,6 +110,7 @@
     border: 0;
     background-color: transparent;
     cursor: pointer;
+    margin-right: 6px;
   }
 
   /* Dropdown Toggle States */
@@ -138,6 +150,8 @@
   }
   /* Selected Tags */
   .v-select .selected-tag {
+    display: flex;
+    align-items: baseline;
     color: #333;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
@@ -145,24 +159,18 @@
     height: 26px;
     margin: 4px 1px 0px 3px;
     padding: 1px 0.25em;
-    float: left;
     line-height: 24px;
   }
   .v-select.single .selected-tag {
     background-color: transparent;
     border-color: transparent;
   }
-  .v-select.single.open .selected-tag {
-    position: absolute;
-    opacity: .5;
-  }
-  .v-select.single.open.searching .selected-tag,
+  .v-select.single.open .selected-tag,
   .v-select.single.loading .selected-tag {
     display: none;
   }
   .v-select .selected-tag .close {
-    float: none;
-    margin-right: 0;
+    margin-left: 2px;
     font-size: 20px;
     appearance: none;
     padding: 0;
@@ -257,9 +265,6 @@
   /* Loading Spinner */
   .v-select .spinner {
     opacity: 0;
-    position: absolute;
-    top: 5px;
-    right: 10px;
     font-size: 5px;
     text-indent: -9999em;
     overflow: hidden;
@@ -322,58 +327,62 @@
 
 <template>
   <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
-    <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
+    <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix">
 
-      <slot v-for="option in valueAsArray" name="selected-option-container"
-            :option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
-        <span class="selected-tag" v-bind:key="option.index">
-          <slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
-            {{ getOptionLabel(option) }}
-          </slot>
-          <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
-            <span aria-hidden="true">&times;</span>
-          </button>
-        </span>
-    </slot>
+      <div class="v-select__selected-options">
+        <slot v-for="option in valueAsArray" name="selected-option-container"
+              :option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
+          <span class="selected-tag" v-bind:key="option.index">
+            <slot name="selected-option" v-bind="(typeof option === 'object')?option:{[label]: option}">
+              {{ getOptionLabel(option) }}
+            </slot>
+            <button v-if="multiple" :disabled="disabled" @click="deselect(option)" type="button" class="close" aria-label="Remove option">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </span>
+        </slot>
 
-      <input
-              ref="search"
-              v-model="search"
-              @keydown.delete="maybeDeleteValue"
-              @keyup.esc="onEscape"
-              @keydown.up.prevent="typeAheadUp"
-              @keydown.down.prevent="typeAheadDown"
-              @keydown.enter.prevent="typeAheadSelect"
-              @blur="onSearchBlur"
-              @focus="onSearchFocus"
-              type="search"
-              class="form-control"
-              :class="inputClasses"
-              autocomplete="off"
-              :disabled="disabled"
-              :placeholder="searchPlaceholder"
-              :tabindex="tabindex"
-              :readonly="!searchable"
-              :id="inputId"
-              aria-label="Search for option"
-      >
+        <input
+                ref="search"
+                v-model="search"
+                @keydown.delete="maybeDeleteValue"
+                @keyup.esc="onEscape"
+                @keydown.up.prevent="typeAheadUp"
+                @keydown.down.prevent="typeAheadDown"
+                @keydown.enter.prevent="typeAheadSelect"
+                @blur="onSearchBlur"
+                @focus="onSearchFocus"
+                type="search"
+                class="form-control"
+                :class="inputClasses"
+                autocomplete="off"
+                :disabled="disabled"
+                :placeholder="searchPlaceholder"
+                :tabindex="tabindex"
+                :readonly="!searchable"
+                :id="inputId"
+                aria-label="Search for option"
+        >
 
-      <button 
-        v-show="showClearButton" 
-        :disabled="disabled" 
-        @click="clearSelection"
-        type="button" 
-        class="clear" 
-        title="Clear selection" 
-      >
-        <span aria-hidden="true">&times;</span>
-      </button>
+      </div>
+      <div class="v-select__actions">
+        <button
+          v-show="showClearButton"
+          :disabled="disabled"
+          @click="clearSelection"
+          type="button"
+          class="clear"
+          title="Clear selection"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
 
-      <i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
+        <i v-if="!noDrop" ref="openIndicator" role="presentation" class="open-indicator"></i>
 
-      <slot name="spinner">
-        <div class="spinner" v-show="mutableLoading">Loading...</div>
-      </slot>
+        <slot name="spinner">
+          <div class="spinner" v-show="mutableLoading">Loading...</div>
+        </slot>
+      </div>
     </div>
 
     <transition :name="transition">
@@ -706,12 +715,12 @@
     watch: {
       /**
        * When the value prop changes, update
-			 * the internal mutableValue.
+       * the internal mutableValue.
        * @param  {mixed} val
        * @return {void}
        */
       value(val) {
-				this.mutableValue = val
+        this.mutableValue = val
       },
 
       /**
@@ -720,7 +729,7 @@
        * @param  {string|object} old
        * @return {void}
        */
-			mutableValue(val, old) {
+      mutableValue(val, old) {
         if (this.multiple) {
           this.onChange ? this.onChange(val) : null
         } else {
@@ -739,24 +748,24 @@
       },
 
       /**
-			 * Maybe reset the mutableValue
+       * Maybe reset the mutableValue
        * when mutableOptions change.
        * @return {[type]} [description]
        */
       mutableOptions() {
         if (!this.taggable && this.resetOnOptionsChange) {
-					this.mutableValue = this.multiple ? [] : null
+          this.mutableValue = this.multiple ? [] : null
         }
       },
 
       /**
-			 * Always reset the mutableValue when
+       * Always reset the mutableValue when
        * the multiple prop changes.
        * @param  {Boolean} val
        * @return {void}
        */
       multiple(val) {
-				this.mutableValue = val ? [] : null
+        this.mutableValue = val ? [] : null
       }
     },
 
@@ -765,9 +774,9 @@
      * attach any event listeners.
      */
     created() {
-			this.mutableValue = this.value
+      this.mutableValue = this.value
       this.mutableOptions = this.options.slice(0)
-			this.mutableLoading = this.loading
+      this.mutableLoading = this.loading
 
       this.$on('option:created', this.maybePushTag)
     },
@@ -979,7 +988,7 @@
           searchable: this.searchable,
           unsearchable: !this.searchable,
           loading: this.mutableLoading,
-          rtl: this.dir === 'rtl',
+          rtl: this.dir === 'rtl', // This can be removed - styling is handled by `dir="rtl"` attribute
           disabled: this.disabled
         }
       },

From a5555a6c6a1ad932e51325d35965c208d2a9fec1 Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Wed, 18 Jul 2018 00:39:09 -0400
Subject: [PATCH 16/28] Toggle dropdown when mousedown in "empty space"

We might have "empty" space w/in the select box, but outside of the
input. In that case, we still want to toggle the dropdown when clicking
on that "empty" space.
---
 src/components/Select.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index d7219ac..f7c33a8 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -329,7 +329,7 @@
   <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
     <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix">
 
-      <div class="v-select__selected-options">
+      <div class="v-select__selected-options" ref="selectedOptions">
         <slot v-for="option in valueAsArray" name="selected-option-container"
               :option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
           <span class="selected-tag" v-bind:key="option.index">
@@ -856,7 +856,8 @@
        * @return {void}
        */
       toggleDropdown(e) {
-        if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
+        if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle ||
+            e.target === this.$refs.selectedOptions || e.target === this.$el) {
           if (this.open) {
             this.$refs.search.blur() // dropdown will close on blur
           } else {

From 34df80314e94a7e3f68862cdb82cc597505fcaf7 Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Wed, 18 Jul 2018 12:56:22 -0400
Subject: [PATCH 17/28] Ensure input take available space, but not more.

`flex-grow` will stretch the input to take all remaining space, but We
need to ensure a small amount of space so there's room to type input.
We'll set the input to "hidden" (via width: 0) when the dropdown is
closed, to prevent adding a "blank" line (see:
https://github.com/sagalbot/vue-select/pull/512). In that case, the
flex-grow will still stretch the input to take any available space, on
the same "line."

This really needs https://github.com/sagalbot/vue-select/pull/512 to
work best.
---
 src/components/Select.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index f7c33a8..99594c7 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -210,11 +210,20 @@
     outline: none;
     margin: 0;
     padding: 0 .5em;
-    width: 10em;
     max-width: 100%;
     background: none;
     position: relative;
     box-shadow: none;
+
+    /* `flex-grow` will stretch the input to take all remaining space, but We
+       need to ensure a small amount of space so there's room to type input. We'll
+       set the input to "hidden" (via width: 0) when the dropdown is closed, to
+       prevent adding a "blank" line (see: https://github.com/sagalbot/vue-select/pull/512).
+       In that case, the flex-grow will still stretch the input to take any
+       available space, on the same "line."
+    */
+    flex-grow: 1;
+    width: 4em;
   }
   .v-select.unsearchable input[type="search"] {
     opacity: 0;

From 746ea25ac9020817db202777d3d72e5a1d089de4 Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Wed, 18 Jul 2018 15:23:36 -0400
Subject: [PATCH 18/28] Consistent padding for selected-tags and input

Flexbox means we can rely on each child of the selected-options
container pushing itself way from neighbors, while also wrapping to
multiple lines when the width gets short! So we're removing the
hard-coded heights and letting things flow as they might, with inner
padding and outer margins doing the work of keeping sufficient space
between things.
---
 src/components/Select.vue | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 99594c7..2dba069 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -14,16 +14,12 @@
      attribute does most of the work for us by rearranging the child elements visually.
    */
   .v-select[dir="rtl"] .v-select__actions {
-    padding: 0 3px 0 6px;
+    padding: 0 3px 0 4px;
   }
   .v-select[dir="rtl"] .dropdown-toggle .clear {
     margin-left: 6px;
     margin-right: 0;
   }
-  .v-select[dir="rtl"] .selected-tag {
-    margin-right: 3px;
-    margin-left: 1px;
-  }
   .v-select[dir="rtl"] .selected-tag .close {
     margin-left: 0;
     margin-right: 2px;
@@ -93,11 +89,12 @@
     flex-basis: 100%;
     flex-grow: 1;
     flex-wrap: wrap;
+    padding: 0 2px 4px;
   }
   .v-select .v-select__actions {
     display: flex;
     align-items: center;
-    padding: 0 6px 0 3px;
+    padding: 0 4px 0 3px;
   }
 
   /* Clear Button */
@@ -151,15 +148,13 @@
   /* Selected Tags */
   .v-select .selected-tag {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     color: #333;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
     border-radius: 4px;
-    height: 26px;
-    margin: 4px 1px 0px 3px;
-    padding: 1px 0.25em;
-    line-height: 24px;
+    margin: 4px 2px 0px 2px;
+    padding: 0 0.25em;
   }
   .v-select.single .selected-tag {
     background-color: transparent;
@@ -204,7 +199,7 @@
     -moz-appearance: none;
     line-height: 1.42857143;
     font-size:1em;
-    height: 34px;
+    height: auto;
     display: inline-block;
     border: none;
     outline: none;

From 22449bc3f2e0d569de540a45e7f44f4dff1f41d9 Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Wed, 18 Jul 2018 16:01:58 -0400
Subject: [PATCH 19/28] Give actions full height, but center them visually

Meaning the are larger click targets, but still centered in the box.
---
 src/components/Select.vue | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 2dba069..e77fdfa 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -30,13 +30,13 @@
 
   /* Open Indicator */
   .v-select .open-indicator {
-    display: inline-block;
+    display: flex;
+    align-items: center;
     cursor: pointer;
     pointer-events: all;
     transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
     transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
     opacity: 1;
-    height: 16px;
     width: 12px; /* To account for extra width from rotating. */
   }
   .v-select .open-indicator:before {
@@ -60,9 +60,6 @@
   .v-select.loading .open-indicator {
     opacity: 0;
   }
-  .v-select.open .open-indicator {
-    bottom: 1px;
-  }
 
   /* Dropdown Toggle */
   .v-select .dropdown-toggle {
@@ -93,7 +90,7 @@
   }
   .v-select .v-select__actions {
     display: flex;
-    align-items: center;
+    align-items: stretch;
     padding: 0 4px 0 3px;
   }
 
@@ -268,6 +265,7 @@
   }
   /* Loading Spinner */
   .v-select .spinner {
+    align-self: center;
     opacity: 0;
     font-size: 5px;
     text-indent: -9999em;

From 3ef668e078aba39dcbe6e0ea882529186030b3ed Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Thu, 19 Jul 2018 15:25:52 -0400
Subject: [PATCH 20/28] Rely on flexbox adjusting input size

Except when "hidden", when we want it to to make it invisible, but still
focusable.
---
 src/components/Select.vue      | 15 +++--------
 test/unit/specs/Select.spec.js | 48 ----------------------------------
 2 files changed, 4 insertions(+), 59 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index e77fdfa..1cb54bb 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -224,17 +224,12 @@
     cursor: pointer;
   }
   .v-select input[type="search"].hidden {
-    width: 0px;
+    height: 0;
     padding: 0;
-  }
-  .v-select input[type="search"].shrunk {
-    width: auto;
-  }
-  .v-select input[type="search"].empty {
-    width: 100%;
+    width: 0;
   }
 
-    /* List Items */
+  /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
   }
@@ -1002,9 +997,7 @@
        */
       inputClasses() {
         return {
-          hidden: !this.multiple && !this.isValueEmpty && !this.dropdownOpen,
-          shrunk: this.multiple && !this.isValueEmpty,
-          empty: this.isValueEmpty,
+          hidden: !this.isValueEmpty && !this.dropdownOpen
         }
       },
 
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index 348382f..8caf503 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -249,36 +249,6 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].isOptionSelected('foo')).toEqual(true)
 		}),
 
-    it('applies the "empty" class to the search input when no value is selected', () => {
-      const vm = new Vue({
-        template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
-        components: {vSelect},
-        data: {
-          value: null,
-          options: [{label: 'one'}]
-        }
-      }).$mount()
-
-      expect(vm.$children[0].inputClasses.empty).toEqual(true)
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
-      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-    }),
-
-    it('applies the "shrunk" class to the search input when one or more value is selected', () => {
-      const vm = new Vue({
-        template: '<div><v-select :options="options" multiple v-model="value"></v-select></div>',
-        components: {vSelect},
-        data: {
-          value: [{label: 'one'}],
-          options: [{label: 'one'}]
-        }
-      }).$mount()
-
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(true)
-      expect(vm.$children[0].inputClasses.empty).toEqual(false)
-      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-    }),
-
 		describe('change Event', () => {
 			it('will trigger the input event when the selection changes', (done) => {
 				const vm = new Vue({
@@ -1350,19 +1320,6 @@ describe('Select.vue', () => {
 			})
     })
 
-    it('should apply the "empty" class to the search input when it does not have a selected value', () => {
-      const vm = new Vue({
-        template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
-        data: {
-          value: '',
-          options: ['one', 'two', 'three']
-        }
-      }).$mount()
-      expect(vm.$children[0].inputClasses.empty).toEqual(true)
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
-      expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-    })
-
     it('should apply the "hidden" class to the search input when a value is present', () => {
       const vm = new Vue({
         template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
@@ -1373,11 +1330,8 @@ describe('Select.vue', () => {
       }).$mount()
 
       expect(vm.$children[0].inputClasses.hidden).toEqual(true)
-      expect(vm.$children[0].inputClasses.empty).toEqual(false)
-      expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
     })
 
-
     it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', () => {
       const vm = new Vue({
         template: '<div><v-select ref="select" :options="options" :value="value"></v-select></div>',
@@ -1392,8 +1346,6 @@ describe('Select.vue', () => {
         Vue.nextTick(() => {
           expect(vm.$children[0].open).toEqual(true)
           expect(vm.$children[0].inputClasses.hidden).toEqual(false)
-          expect(vm.$children[0].inputClasses.empty).toEqual(false)
-          expect(vm.$children[0].inputClasses.shrunk).toEqual(false)
           done()
         })
       })

From 76cfd7cad923567cca86d9f287aa185bb771af2e Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Wed, 18 Jul 2018 01:15:19 -0400
Subject: [PATCH 21/28] Clicking a selected tag toggles dropdown

---
 src/components/Select.vue      |  3 ++-
 test/unit/specs/Select.spec.js | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 2abeafa..936c06f 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -847,7 +847,8 @@
        * @return {void}
        */
       toggleDropdown(e) {
-        if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
+        if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle ||
+            e.target.classList.contains('selected-tag') || e.target === this.$el) {
           if (this.open) {
             this.$refs.search.blur() // dropdown will close on blur
           } else {
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index 348382f..af6947c 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -433,6 +433,26 @@ describe('Select.vue', () => {
 			})
 		})
 
+		it('should open the dropdown when the selected tag is clicked', (done) => {
+			const vm = new Vue({
+				template: '<div><v-select :options="options" :value="value"></v-select></div>',
+				components: {vSelect},
+				data: {
+					value: [{label: 'one'}],
+					options: [{label: 'one'}]
+				}
+			}).$mount()
+
+			const selectedTag = vm.$children[0].$el.getElementsByClassName('selected-tag')[0]
+			vm.$children[0].toggleDropdown({target: selectedTag})
+			Vue.nextTick(() => {
+				Vue.nextTick(() => {
+					expect(vm.$children[0].open).toEqual(true)
+					done()
+				})
+			})
+		})
+
 		it('can close the dropdown when the el is clicked', (done) => {
 			const vm = new Vue({
 				template: '<div><v-select></v-select></div>',

From 34a3a34a99be26f4f2bfbc32cb9fb0b8eed7cc4b Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Thu, 19 Jul 2018 16:15:05 -0400
Subject: [PATCH 22/28] Use relatively-sized close trigger

So that it respects changes in the font-size of the select itself.
---
 src/components/Select.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 1cb54bb..f8c1710 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -99,7 +99,7 @@
     font-size: 23px;
     font-weight: 700;
     line-height: 1;
-    color: rgba(60, 60, 60, .5);
+    color: rgba(60, 60, 60, 0.5);
     padding: 0;
     border: 0;
     background-color: transparent;
@@ -163,7 +163,7 @@
   }
   .v-select .selected-tag .close {
     margin-left: 2px;
-    font-size: 20px;
+    font-size: 1.25em;
     appearance: none;
     padding: 0;
     cursor: pointer;
@@ -195,7 +195,7 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     line-height: 1.42857143;
-    font-size:1em;
+    font-size: 1em;
     height: auto;
     display: inline-block;
     border: none;

From faa548106f6843c76b1d5209018e7998f19250d0 Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Thu, 19 Jul 2018 16:15:59 -0400
Subject: [PATCH 23/28] Remove unnecessary positioning rule.

This is left over from the days of absolutely-positioning the select
elements.
---
 src/components/Select.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index f8c1710..9fc7d3c 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -204,7 +204,6 @@
     padding: 0 .5em;
     max-width: 100%;
     background: none;
-    position: relative;
     box-shadow: none;
 
     /* `flex-grow` will stretch the input to take all remaining space, but We

From 9a5d666bd1ebef9c5201fd8b41898716df548691 Mon Sep 17 00:00:00 2001
From: Steven Harman <steven@harmanly.com>
Date: Fri, 20 Jul 2018 11:44:04 -0400
Subject: [PATCH 24/28] Maintain stable height when selected

We need the selected-tag and input to have the same line height, and
same border widths so the height of the content (either a selected-tag
or the input) is stable. Otherwise the v-select will change height by a
few pixels when a value is selected vs empty.
---
 src/components/Select.vue | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 9fc7d3c..84bfc02 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -67,7 +67,7 @@
     -moz-appearance: none;
     appearance: none;
     display: flex;
-    padding: 0;
+    padding: 0 0 4px 0;
     background: none;
     border: 1px solid rgba(60, 60, 60, .26);
     border-radius: 4px;
@@ -86,7 +86,7 @@
     flex-basis: 100%;
     flex-grow: 1;
     flex-wrap: wrap;
-    padding: 0 2px 4px;
+    padding: 0 2px;
   }
   .v-select .v-select__actions {
     display: flex;
@@ -146,10 +146,11 @@
   .v-select .selected-tag {
     display: flex;
     align-items: center;
-    color: #333;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
     border-radius: 4px;
+    color: #333;
+    line-height: 1.42857143; /* Normalize line height */
     margin: 4px 2px 0px 2px;
     padding: 0 0.25em;
   }
@@ -196,12 +197,11 @@
     -moz-appearance: none;
     line-height: 1.42857143;
     font-size: 1em;
-    height: auto;
     display: inline-block;
-    border: none;
+    border: 1px solid transparent;
     outline: none;
-    margin: 0;
-    padding: 0 .5em;
+    margin: 4px 0 0 0;
+    padding: 0 0.5em;
     max-width: 100%;
     background: none;
     box-shadow: none;
@@ -223,6 +223,7 @@
     cursor: pointer;
   }
   .v-select input[type="search"].hidden {
+    border: none;
     height: 0;
     padding: 0;
     width: 0;

From d00b567428b1d151faab8b675b5f40462fa2209a Mon Sep 17 00:00:00 2001
From: Matthew Beatty <beattyml1@gmail.com>
Date: Wed, 1 Aug 2018 13:04:08 -0400
Subject: [PATCH 25/28] Added the combobox, listbox, and option roles to the
 input, ul, and li items respectively per W3C spec, Closes #606

---
 src/components/Select.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 2abeafa..a2eee8e 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -355,6 +355,7 @@
               :tabindex="tabindex"
               :readonly="!searchable"
               :id="inputId"
+              role="combobox"
               aria-label="Search for option"
       >
 
@@ -377,8 +378,8 @@
     </div>
 
     <transition :name="transition">
-      <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }">
-        <li v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
+      <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" role="listbox">
+        <li role="option" v-for="(option, index) in filteredOptions" v-bind:key="index" :class="{ active: isOptionSelected(option), highlight: index === typeAheadPointer }" @mouseover="typeAheadPointer = index">
           <a @mousedown.prevent="select(option)">
           <slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
             {{ getOptionLabel(option) }}

From 7e3f4551547250176e34b9900a39c22c05ea9d75 Mon Sep 17 00:00:00 2001
From: Matthew Beatty <beattyml1@gmail.com>
Date: Wed, 1 Aug 2018 13:26:47 -0400
Subject: [PATCH 26/28] Also indicate whether or not dropdown is expanded

---
 src/components/Select.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index a2eee8e..4570be3 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -356,6 +356,7 @@
               :readonly="!searchable"
               :id="inputId"
               role="combobox"
+              :aria-expanded="dropdownOpen"
               aria-label="Search for option"
       >
 

From adb1c88220a822912e6bde36cff4d8b3747a59ac Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Tue, 7 Aug 2018 20:36:19 -0700
Subject: [PATCH 27/28] - Update v-select__ prefix to vs__ for brevity - Adjust
 right padding on dropdown indicator - remove dead clearfix code / class

---
 src/components/Select.vue | 22 +++++++---------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index 84bfc02..870240b 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -13,7 +13,7 @@
   /* Rtl support - Because we're using a flexbox-based layout, the `dir="rtl"` HTML
      attribute does most of the work for us by rearranging the child elements visually.
    */
-  .v-select[dir="rtl"] .v-select__actions {
+  .v-select[dir="rtl"] .vs__actions {
     padding: 0 3px 0 4px;
   }
   .v-select[dir="rtl"] .dropdown-toggle .clear {
@@ -73,25 +73,17 @@
     border-radius: 4px;
     white-space: normal;
   }
-  .v-select .dropdown-toggle:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
-  .v-select .v-select__selected-options {
+  .v-select .vs__selected-options {
     display: flex;
     flex-basis: 100%;
     flex-grow: 1;
     flex-wrap: wrap;
     padding: 0 2px;
   }
-  .v-select .v-select__actions {
+  .v-select .vs__actions {
     display: flex;
     align-items: stretch;
-    padding: 0 4px 0 3px;
+    padding: 0 6px 0 3px;
   }
 
   /* Clear Button */
@@ -324,9 +316,9 @@
 
 <template>
   <div :dir="dir" class="dropdown v-select" :class="dropdownClasses">
-    <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix">
+    <div ref="toggle" @mousedown.prevent="toggleDropdown" class="dropdown-toggle">
 
-      <div class="v-select__selected-options" ref="selectedOptions">
+      <div class="vs__selected-options" ref="selectedOptions">
         <slot v-for="option in valueAsArray" name="selected-option-container"
               :option="(typeof option === 'object')?option:{[label]: option}" :deselect="deselect" :multiple="multiple" :disabled="disabled">
           <span class="selected-tag" v-bind:key="option.index">
@@ -362,7 +354,7 @@
         >
 
       </div>
-      <div class="v-select__actions">
+      <div class="vs__actions">
         <button
           v-show="showClearButton"
           :disabled="disabled"

From 237e946c1911fa37fe4d1e47ee656ac885f92ae4 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Tue, 7 Aug 2018 21:13:34 -0700
Subject: [PATCH 28/28] Pull onTab up to prop, add test

---
 src/components/Select.vue      | 22 ++++++++++++----------
 test/unit/specs/Select.spec.js | 20 ++++++++++++++++++--
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index b07da63..80ccb9e 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -549,6 +549,18 @@
         }
       },
 
+      /**
+       * Select the current value if selectOnTab is enabled
+       */
+      onTab: {
+        type: Function,
+        default: function () {
+          if (this.selectOnTab) {
+            this.typeAheadSelect();
+          }
+        },
+      },
+
       /**
        * Enable/disable creating options from searchInput.
        * @type {Boolean}
@@ -927,16 +939,6 @@
         }
       },
 
-      /**
-       * Select the current value if selectOnTab is enabled
-       * @return {void}
-       */
-      onTab() {
-        if (this.selectOnTab) {
-          this.typeAheadSelect();
-        }
-      },
-
       /**
        * Determine if an option exists
        * within this.mutableOptions array.
diff --git a/test/unit/specs/Select.spec.js b/test/unit/specs/Select.spec.js
index f67dcc5..38b0165 100644
--- a/test/unit/specs/Select.spec.js
+++ b/test/unit/specs/Select.spec.js
@@ -109,6 +109,22 @@ describe('Select.vue', () => {
 			expect(vm.$children[0].mutableValue).toEqual(vm.value)
 		})
 
+    it('can select an option on tab', (done) => {
+      const vm = new Vue({
+        template: `<div><v-select :options="['one','two']" select-on-tab></v-select></div>`,
+        components: {vSelect},
+      }).$mount()
+
+      vm.$children[0].typeAheadPointer = 0
+
+      trigger(vm.$children[0].$refs.search, 'keydown', (e) => e.keyCode = 9)
+
+      Vue.nextTick(() => {
+        expect(vm.$children[0].mutableValue).toEqual('one');
+        done();
+      })
+    })
+
 		it('can deselect a pre-selected object', () => {
 			const vm = new Vue({
 				template: '<div><v-select :options="options" :value="value" :multiple="true"></v-select></div>',
@@ -1377,7 +1393,7 @@ describe('Select.vue', () => {
 					value: 'foo'
 				}
 			}).$mount()
-			
+
 			expect(vm.mutableValue).toEqual('foo')
 			vm.$el.querySelector( 'button.clear' ).click()
 			expect(vm.mutableValue).toEqual(null)
@@ -1396,6 +1412,6 @@ describe('Select.vue', () => {
 			const buttonEl = vm.$el.querySelector( 'button.clear' )
 			expect(buttonEl.disabled).toEqual(true);
 		})
-	
+
 	});
 })