diff --git a/README.md b/README.md
index 246679c..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
@@ -104,3 +106,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)
diff --git a/dev/dev.html b/dev/dev.html
index fe481cb..165c863 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;
@@ -67,7 +67,7 @@
               </button>
             </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/docs/gitbook/Basics/Options.md b/docs/gitbook/Basics/Options.md
index ac506a6..5f6ab34 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 {#null}
 
 `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 `[]`.
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)**
diff --git a/src/components/Select.vue b/src/components/Select.vue
index d0164a2..dec2a18 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -1,44 +1,43 @@
 <style>
   .v-select {
     position: relative;
-    font-family: sans-serif;
+    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"] .vs__actions {
+    padding: 0 3px 0 4px;
   }
-  .v-select.rtl .selected-tag {
-    float: right;
-    margin-right: 3px;
-    margin-left: 1px;
+  .v-select[dir="rtl"] .dropdown-toggle .clear {
+    margin-left: 6px;
+    margin-right: 0;
   }
-  .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;
+    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: 20px; width: 10px;
+    width: 12px; /* To account for extra width from rotating. */
   }
   .v-select .open-indicator:before {
     border-color: rgba(60, 60, 60, .5);
@@ -48,7 +47,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);
@@ -61,43 +60,43 @@
   .v-select.loading .open-indicator {
     opacity: 0;
   }
-  .v-select.open .open-indicator {
-    bottom: 1px;
-  }
+
   /* Dropdown Toggle */
   .v-select .dropdown-toggle {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    display: block;
-    padding: 0;
+    display: flex;
+    padding: 0 0 4px 0;
     background: none;
     border: 1px solid rgba(60, 60, 60, .26);
     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 .vs__selected-options {
+    display: flex;
+    flex-basis: 100%;
+    flex-grow: 1;
+    flex-wrap: wrap;
+    padding: 0 2px;
+  }
+  .v-select .vs__actions {
+    display: flex;
+    align-items: stretch;
+    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;
-    color: rgba(60, 60, 60, .5);
+    color: rgba(60, 60, 60, 0.5);
     padding: 0;
     border: 0;
     background-color: transparent;
     cursor: pointer;
+    margin-right: 6px;
   }
 
   /* Dropdown Toggle States */
@@ -137,32 +136,27 @@
   }
   /* Selected Tags */
   .v-select .selected-tag {
-    color: #333;
+    display: flex;
+    align-items: center;
     background-color: #f0f0f0;
     border: 1px solid #ccc;
     border-radius: 4px;
-    height: 26px;
-    margin: 4px 1px 0px 3px;
-    padding: 1px 0.25em;
-    float: left;
-    line-height: 24px;
+    color: #333;
+    line-height: 1.42857143; /* Normalize line height */
+    margin: 4px 2px 0px 2px;
+    padding: 0 0.25em;
   }
   .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;
-    font-size: 20px;
+    margin-left: 2px;
+    font-size: 1.25em;
     appearance: none;
     padding: 0;
     cursor: pointer;
@@ -194,18 +188,25 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     line-height: 1.42857143;
-    font-size:1em;
-    height: 34px;
+    font-size: 1em;
     display: inline-block;
-    border: none;
+    border: 1px solid transparent;
     outline: none;
-    margin: 0;
-    padding: 0 .5em;
-    width: 10em;
+    margin: 4px 0 0 0;
+    padding: 0 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
+       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;
@@ -213,7 +214,14 @@
   .v-select.unsearchable input[type="search"]:hover {
     cursor: pointer;
   }
-    /* List Items */
+  .v-select input[type="search"].hidden {
+    border: none;
+    height: 0;
+    padding: 0;
+    width: 0;
+  }
+
+  /* List Items */
   .v-select li {
     line-height: 1.42857143; /* Normalize line height */
   }
@@ -244,10 +252,8 @@
   }
   /* Loading Spinner */
   .v-select .spinner {
+    align-self: center;
     opacity: 0;
-    position: absolute;
-    top: 5px;
-    right: 10px;
     font-size: 5px;
     text-indent: -9999em;
     overflow: hidden;
@@ -310,63 +316,70 @@
 
 <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">
 
-      <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="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">
+            <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"
-              autocomplete="off"
-              :disabled="disabled"
-              :placeholder="searchPlaceholder"
-              :tabindex="tabindex"
-              :readonly="!searchable"
-              :style="{ width: isValueEmpty ? '100%' : 'auto' }"
-              :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"
+                @keydown.tab="onTab"
+                @blur="onSearchBlur"
+                @focus="onSearchFocus"
+                type="search"
+                class="form-control"
+                :class="inputClasses"
+                autocomplete="off"
+                :disabled="disabled"
+                :placeholder="searchPlaceholder"
+                :tabindex="tabindex"
+                :readonly="!searchable"
+                :id="inputId"
+                role="combobox"
+                :aria-expanded="dropdownOpen"
+                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="vs__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">
-      <ul ref="dropdownMenu" v-if="dropdownOpen" class="dropdown-menu" :style="{ 'max-height': maxHeight }" @mousedown="onMousedown">
-        <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" @mousedown="onMousedown">
+        <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.stop="select(option)">
           <slot name="option" v-bind="(typeof option === 'object')?option:{[label]: option}">
             {{ getOptionLabel(option) }}
@@ -508,9 +521,25 @@
         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.
+       *
+       * 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}
@@ -518,6 +547,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(
@@ -526,9 +559,7 @@
                 'http://sagalbot.github.io/vue-select/#ex-labels'
               )
             }
-            if (this.label && option[this.label]) {
-              return option[this.label]
-            }
+            return option[this.label]
           }
           return option;
         }
@@ -548,6 +579,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}
@@ -680,6 +723,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() {
@@ -694,12 +745,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
       },
 
       /**
@@ -708,7 +759,7 @@
        * @param  {string|object} old
        * @return {void}
        */
-			mutableValue(val, old) {
+      mutableValue(val, old) {
         if (this.multiple) {
           this.onChange ? this.onChange(val) : null
         } else {
@@ -727,24 +778,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
       }
     },
 
@@ -753,9 +804,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)
     },
@@ -772,7 +823,15 @@
           if (this.taggable && !this.optionExists(option)) {
             option = this.createOption(option)
           }
-
+          if(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]
           } else if (this.multiple) {
@@ -794,7 +853,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
             }
           })
@@ -835,7 +894,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 {
@@ -853,22 +913,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
       },
 
       /**
@@ -982,11 +1070,21 @@
           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
         }
       },
 
+      /**
+       * Classes to be output on input.form-control
+       * @return {Object}
+       */
+      inputClasses() {
+        return {
+          hidden: !this.isValueEmpty && !this.dropdownOpen
+        }
+      },
+
       /**
        * If search text should clear on blur
        * @return {Boolean} True when single and clearSearchOnSelect
@@ -1050,9 +1148,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;
@@ -1063,7 +1161,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 f67dcc5..81770e0 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>',
@@ -403,6 +419,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>',
@@ -837,6 +873,241 @@ 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 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>',
+				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].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', () => {
+			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].deselect('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 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)
+    })
+
+		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 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'})
+		})
+
+		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')
+      })
+
+		})
+	})
+
 	describe('When Tagging Is Enabled', () => {
 		it('can determine if a given option string already exists', () => {
 			const vm = new Vue({
@@ -1318,7 +1589,39 @@ describe('Select.vue', () => {
 				expect(vm.$refs.select.search).toEqual('')
 				done()
 			})
-		})
+    })
+
+    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)
+    })
+
+
+    it('should not apply the "hidden" class to the search input when a value is present, and the dropdown is open', (done) => {
+      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)
+          done()
+        })
+      })
+    })
 
 		it ('should not reset the search input on focus lost when clearSearchOnSelect is false', (done) => {
 			const vm = new Vue({
@@ -1342,7 +1645,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 )
@@ -1377,7 +1680,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 +1699,6 @@ describe('Select.vue', () => {
 			const buttonEl = vm.$el.querySelector( 'button.clear' )
 			expect(buttonEl.disabled).toEqual(true);
 		})
-	
+
 	});
 })