From ff86862dc30065ee3e0ddf23e8ffa0d8290ac8fe Mon Sep 17 00:00:00 2001
From: Damian Dulisz <damian.dulisz@monterail.com>
Date: Sat, 30 Apr 2016 16:42:57 +0200
Subject: [PATCH] Further improvements

* Renamed CSS classes 'dropdown' => 'multiselect`
* Add support for async options with callback on search
* Added `closeOnSelect` and `resetAfter` props
* `resetAfter` requires further tests
---
 package.json                        |   1 +
 src/App.vue                         |  36 +-
 src/assets/_functions.sass          |  32 +
 src/components/Multiselect.vue      | 282 ++++----
 src/data/countries.json             | 974 ++++++++++++++++++++++++++++
 test/unit/specs/Multiselect.spec.js |  86 ++-
 6 files changed, 1290 insertions(+), 121 deletions(-)
 create mode 100644 src/data/countries.json

diff --git a/package.json b/package.json
index 48e98ede..bb7aa8c4 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "dev": "node build/dev-server.js",
     "build": "node build/build.js",
     "unit": "karma start test/unit/karma.conf.js --single-run",
+    "unit-watch": "karma start test/unit/karma.conf.js --watch",
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit && npm run e2e",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
diff --git a/src/App.vue b/src/App.vue
index 4a21d808..080c477a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,30 @@
 <template>
   <div id="app">
     <h1><img class="logo" src="./assets/logo.png"> Vue-multiselect</h1>
-    <multiselect
+    <!-- <multiselect
       :options="options"
       :selected="selected"
       :multiple="multiple"
       :searchable="searchable"
       :placeholder="placeholder"
     >
+      <span slot="noResult">
+        Oops! No elements found. Consider changing the search query.
+      </span>
+    </multiselect> -->
+
+    <multiselect
+      :options="countries"
+      :selected="selectedCountries"
+      :multiple="multiple"
+      :searchable="searchable"
+      :placeholder="placeholder"
+      :on-search-change="asyncFind"
+      label="name"
+    >
+      <span slot="noResult">
+        Oops! No elements found. Consider changing the search query.
+      </span>
     </multiselect>
 
     <h2>Config</h2>
@@ -27,6 +44,7 @@
       :searchable="true"
       :placeholder="placeholder"
       label="name"
+      :close-on-select="false"
     >
     </multiselect>
 
@@ -35,6 +53,7 @@
 
 <script>
 import Multiselect from './components/Multiselect'
+import countries from './data/countries.json'
 
 export default {
   components: {
@@ -48,7 +67,18 @@ export default {
       searchable: true,
       placeholder: 'Select props',
       source: [{ name: '1' }, { name: '2' }, { name: '3' }],
-      value: []
+      value: [],
+      countries: [],
+      selectedCountries: []
+    }
+  },
+  methods: {
+    asyncFind (query) {
+      setTimeout(() => {
+        this.countries = countries.filter((element, index, array) => {
+          return element.name.toLowerCase().includes(query.toLowerCase())
+        })
+      }, 1500)
     }
   }
 }
@@ -70,7 +100,7 @@ body {
 
 #app {
   margin-top: -100px;
-  width: 500px;
+  width: 450px;
   max-width: 500px;
   font-family: 'Lato', Helvetica, sans-serif;
   text-align: center;
diff --git a/src/assets/_functions.sass b/src/assets/_functions.sass
index db84e98a..09c72905 100644
--- a/src/assets/_functions.sass
+++ b/src/assets/_functions.sass
@@ -19,3 +19,35 @@
     $rem-list: append($rem-list, to-rem(nth($values, $i)))
 
   @return $rem-list
+
+@mixin spinner($size: 16px, $color: #333, $border-width: 2px)
+  width: rem($size)
+
+  &:before,
+  &:after
+    position: absolute
+    content: ''
+    top: 50%
+    left: 50%
+    margin: rem($size / -2 0 0 $size / -2)
+    width: rem($size)
+    height: rem($size)
+    border-radius: 100%
+    border-color: $color transparent transparent
+    border-style: solid
+    border-width: $border-width
+    box-shadow: 0 0 0 1px transparent
+
+  &:before
+    animation: spinning 1.8s cubic-bezier(0.41, 0.26, 0.2, 0.62)
+    animation-iteration-count: infinite
+
+  &:after
+    animation: spinning 1.8s cubic-bezier(0.51, 0.09, 0.21, 0.8)
+    animation-iteration-count: infinite
+
+@keyframes spinning
+  0%
+    transform: rotate3d(0, 0, 1, 0)
+  100%
+    transform: rotate3d(0, 0, 1, 720deg)
diff --git a/src/components/Multiselect.vue b/src/components/Multiselect.vue
index db9e2b60..34c2b736 100644
--- a/src/components/Multiselect.vue
+++ b/src/components/Multiselect.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-  .dropdown(
+  .multiselect(
     @focus="tryActivate()",
     @keydown.self.down.prevent="pointerForward()"
     @keydown.self.up.prevent="pointerBackward()"
@@ -7,24 +7,25 @@
     @keyup.esc="deactivate()"
     tabindex="0",
     @blur="tryDeactivate()",
-    :class="{ 'dropdown--active': isOpen }"
+    :class="{ 'multiselect--active': isOpen }"
   )
-    .dropdown__select(@mousedown.prevent="toggle()")
-    .dropdown__tags(v-el:tags)
-      span.dropdown__tag(
+    .multiselect__select(@mousedown.prevent="toggle()")
+    .multiselect__tags(v-el:tags)
+      span.multiselect__tag(
         v-for="option in value"
         track-by="$index"
         v-if="multiple"
         onmousedown="event.preventDefault()"
       )
         | {{ getOptionLabel(option) }}
-        i.dropdown__tag-icon(
+        i.multiselect__tag-icon(
           aria-hidden="true"
           tabindex="1"
           @keydown.enter.prevent="removeElement(option)"
           @mousedown.prevent="removeElement(option)"
         )
-      input.dropdown__input(
+      .multiselect__spinner(v-show="loading" transition="multiselect__loading")
+      input.multiselect__input(
         name="search"
         type="search"
         autocomplete="off"
@@ -41,10 +42,10 @@
         @keydown.enter.stop.prevent.self="addPointerElement('enter')"
         @keydown.delete="removeLastElement()"
       )
-      span.dropdown__single(v-if="!searchable && !multiple")
+      span.multiselect__single(v-if="!searchable && !multiple")
         | {{ getOptionLabel(value) ? getOptionLabel(value) : placeholder }}
-    ul.dropdown__content(
-      transition="dropdown",
+    ul.multiselect__content(
+      transition="multiselect",
       v-el:list,
       v-if="isOpen",
       :style="{ maxHeight: maxHeight + 'px' }"
@@ -53,15 +54,17 @@
         v-for="option in filteredOptions"
         track-by="$index"
       )
-        a.dropdown__option(
+        a.multiselect__option(
           tabindex="0"
           @mousedown.prevent="select(option)",
-          :class="{ 'dropdown__option--highlight': $index === pointer && this.showLabels, 'dropdown__option--selected': isSelected(option) }"
+          :class="{ 'multiselect__option--highlight': $index === pointer && this.showLabels, 'multiselect__option--selected': isSelected(option) }"
           @mouseover="pointerSet($index)"
         )
           | {{ getOptionLabel(option) }}
       li(v-show="filteredOptions.length === 0")
-        span.dropdown__option No elements found. Consider changing the search query.
+        span.multiselect__option
+          slot(name="noResult")
+            | No elements found. Consider changing the search query.
 </template>
 
 <script>
@@ -71,10 +74,18 @@
         search: '',
         isOpen: false,
         pointer: 0,
-        value: []
+        value: [],
+        loading: false
       }
     },
     props: {
+      options: {
+        type: Array,
+        required: true,
+        default () {
+          return []
+        }
+      },
       multiple: {
         type: Boolean,
         default: false
@@ -82,11 +93,6 @@
       selected: {
         required: true
       },
-      options: {
-        type: Array,
-        required: true,
-        default: []
-      },
       label: {
         type: String,
         default: 'value'
@@ -123,9 +129,21 @@
         type: Function,
         default: false
       },
+      onSearchChange: {
+        type: Function,
+        default: false
+      },
       touched: {
         type: Boolean,
         default: false
+      },
+      resetAfter: {
+        type: Boolean,
+        default: false
+      },
+      closeOnSelect: {
+        type: Boolean,
+        default: true
       }
     },
     created: function () {
@@ -149,11 +167,26 @@
     watch: {
       'value' () {
         if (this.onChange) {
-          console.log('on change', this.value)
           this.onChange(this.value)
         } else {
           this.$set('selected', this.value)
         }
+        if (this.resetAfter) {
+          this.$set('value', null)
+          this.$set('search', null)
+          this.$set('selected', null)
+        }
+      },
+      'search' () {
+        if (this.onSearchChange) {
+          this.onSearchChange(this.search)
+          this.loading = true
+        }
+      },
+      'options' () {
+        if (this.onSearchChange) {
+          this.loading = false
+        }
       }
     },
     methods: {
@@ -192,9 +225,12 @@
           } else {
             this.$set('value', option)
           }
-          this.$el.blur()
-          if (this.searchable) {
-            this.$els.search.blur()
+          if (this.closeOnSelect) {
+            this.$el.blur()
+            if (this.searchable) {
+              this.$els.search.blur()
+            }
+            this.deactivate()
           }
         }
       },
@@ -235,6 +271,7 @@
         }
       },
       deactivate () {
+        if (!this.isOpen) return
         this.touched = true
         if (this.searchable) {
           this.multiple
@@ -290,31 +327,50 @@
 <style lang="sass" scoped>
   @import '../assets/functions'
 
-  $dropdown-height: 40px
-  $dropdown-font: inherit
-  $dropdown-font-size: 14px
-  $dropdown-line-height: 16px
-  $dropdown-font-weight: 300
-  $dropdown-color: #41B883
-  $dropdown-remove-color: #FF6A6A
-  $dropdown-color-text: #35495E
-  $dropdown-color-secondary: #F3F3F3
-  $dropdown-background: #fff
-  $dropdown-hover-bg: $dropdown-color
-  $dropdown-border: #E8E8E8
-  $dropdown-border-width: 1px
-  $dropdown-border-radius: 5px
-  $dropdown-padding: ($dropdown-height - $dropdown-line-height) / 2
-
-  .dropdown,
-  .dropdown__input,
-  .dropdown__single
+  $multiselect-height: 40px
+  $multiselect-font: inherit
+  $multiselect-font-size: 14px
+  $multiselect-line-height: 16px
+  $multiselect-font-weight: 300
+  $multiselect-color: #41B883
+  $multiselect-remove-color: #FF6A6A
+  $multiselect-color-text: #35495E
+  $multiselect-color-secondary: #F3F3F3
+  $multiselect-background: #fff
+  $multiselect-hover-bg: $multiselect-color
+  $multiselect-border: #E8E8E8
+  $multiselect-border-width: 1px
+  $multiselect-border-radius: 5px
+  $multiselect-padding: ($multiselect-height - $multiselect-line-height) / 2
+
+  .multiselect__spinner
+    @include spinner(16px, $multiselect-color)
+
+    position: absolute
+    right: 1px
+    top: 1px
+    width: 48px
+    height: 35px
+    background: $multiselect-background
+    display: block
+
+  .multiselect__loading-transition
+    transition: opacity 0.4s ease-in-out
+    opacity: 1
+
+  .multiselect__loading-enter,
+  .multiselect__loading-leave
+    opacity: 0
+
+  .multiselect,
+  .multiselect__input,
+  .multiselect__single
     font:
-      family: $dropdown-font
-      size: rem($dropdown-font-size)
-      weight: $dropdown-font-weight
+      family: $multiselect-font
+      size: rem($multiselect-font-size)
+      weight: $multiselect-font-weight
 
-  .dropdown
+  .multiselect
     box-sizing: content-box
 
     *
@@ -323,9 +379,9 @@
     display: block
     position: relative
     width: 100%
-    min-height: rem($dropdown-height)
+    min-height: rem($multiselect-height)
     text-align: left
-    color: $dropdown-color-text
+    color: $multiselect-color-text
 
     &:focus
       outline: none
@@ -333,24 +389,24 @@
     &--active
       z-index: 50
 
-      .dropdown__current,
-      .dropdown__input,
-      .dropdown__tags
+      .multiselect__current,
+      .multiselect__input,
+      .multiselect__tags
         border-bottom-left-radius: 0
         border-bottom-right-radius: 0
 
-      .dropdown__select
+      .multiselect__select
         transform: rotateZ(180deg)
 
-  .dropdown__input,
-  .dropdown__single
+  .multiselect__input,
+  .multiselect__single
     position: relative
     display: inline-block
     min-height: rem(20px)
     line-height: rem(20px)
     border: none
-    border-radius: $dropdown-border-radius
-    background: $dropdown-background
+    border-radius: $multiselect-border-radius
+    background: $multiselect-background
     padding: 1px 0 0 0
     width: auto
     transition: border .1s ease
@@ -358,36 +414,36 @@
     margin-bottom: rem(8px)
 
     &:hover
-      border-color: darken($dropdown-border, 10%)
+      border-color: darken($multiselect-border, 10%)
 
     &:focus
-      border-color: darken($dropdown-border, 25%)
+      border-color: darken($multiselect-border, 25%)
       outline: none
 
-  .dropdown__single
+  .multiselect__single
     padding-left: rem(6px)
     margin-bottom: rem(8px)
 
-  .dropdown__tags
-    min-height: rem($dropdown-height)
+  .multiselect__tags
+    min-height: rem($multiselect-height)
     display: block
     padding: rem(8px 40px 0 8px)
-    border-radius: $dropdown-border-radius
-    border: 1px solid $dropdown-border
-    background: $dropdown-background
+    border-radius: $multiselect-border-radius
+    border: 1px solid $multiselect-border
+    background: $multiselect-background
 
-  .dropdown__tag
+  .multiselect__tag
     position: relative
     display: inline-block
     padding: rem(4px 26px 4px 10px)
-    border-radius: $dropdown-border-radius
+    border-radius: $multiselect-border-radius
     margin-right: rem(10px)
     color: #fff
     line-height: 1
-    background: $dropdown-color
+    background: $multiselect-color
     margin-bottom: rem(8px)
 
-  .dropdown__tag-icon
+  .multiselect__tag-icon
     cursor: pointer
     margin-left: 7px
     position: absolute
@@ -401,41 +457,41 @@
     text-align: center
     line-height: rem(22px)
     transition: all 0.2s ease
-    border-radius: $dropdown-border-radius
+    border-radius: $multiselect-border-radius
 
     &:after
       content: "\00D7"
-      color: darken($dropdown-color, 20%)
+      color: darken($multiselect-color, 20%)
       font-size: rem(14px)
 
     &:focus, &:hover
-      background: darken($dropdown-color, 8%)
+      background: darken($multiselect-color, 8%)
 
       &:after
         color: white
 
-  .dropdown__current
-    line-height: rem($dropdown-line-height)
-    min-height: rem($dropdown-height)
+  .multiselect__current
+    line-height: rem($multiselect-line-height)
+    min-height: rem($multiselect-height)
     box-sizing: border-box
     display: block
     overflow: hidden
-    padding: rem(8px $dropdown-padding 0)
+    padding: rem(8px $multiselect-padding 0)
     padding-right: 30px
     white-space: nowrap
     margin: 0
     text-decoration: none
-    border-radius: $dropdown-border-radius
-    border: 1px solid $dropdown-border
+    border-radius: $multiselect-border-radius
+    border: 1px solid $multiselect-border
     cursor: pointer
 
-  .dropdown__select
+  .multiselect__select
     line-height: rem(16px)
     display: block
     position: absolute
     box-sizing: border-box
-    width: rem($dropdown-height)
-    height: rem($dropdown-height - 2px)
+    width: rem($multiselect-height)
+    height: rem($multiselect-height - 2px)
     right: rem(1px)
     top: rem(1px)
     padding: rem(4px 8px)
@@ -448,7 +504,7 @@
     &:before
       position: absolute
       right: 15px
-      top: $dropdown-height / 2 - 8
+      top: $multiselect-height / 2 - 8
       color: #999
       margin-top: rem(4px)
       border-style: solid
@@ -456,38 +512,38 @@
       border-color: #999999 transparent transparent transparent
       content: ""
 
-  .dropdown__placeholder
+  .multiselect__placeholder
     color: #ADADAD
     display: inline-block
     margin-bottom: rem(10px)
     padding-top: rem(2px)
 
-    .dropdown--active &
+    .multiselect--active &
       display: none
 
-  .dropdown__content
+  .multiselect__content
     position: absolute
     list-style: none
     display: block
-    background: $dropdown-background
+    background: $multiselect-background
     width: 100%
-    max-height: rem(200px + $dropdown-height)
+    max-height: rem(200px + $multiselect-height)
     overflow: auto
     padding: 0
     margin: 0
-    border: 1px solid $dropdown-border
+    border: 1px solid $multiselect-border
     border-top: none
-    border-bottom-left-radius: $dropdown-border-radius
-    border-bottom-right-radius: $dropdown-border-radius
+    border-bottom-left-radius: $multiselect-border-radius
+    border-bottom-right-radius: $multiselect-border-radius
     z-index: 50
 
     &::webkit-scrollbar
       display: none
 
-  .dropdown__option
+  .multiselect__option
     display: block
-    padding: rem($dropdown-padding)
-    min-height: rem($dropdown-height)
+    padding: rem($multiselect-padding)
+    min-height: rem($multiselect-height)
     line-height: rem(16px)
     font-weight: 300
     text-decoration: none
@@ -499,12 +555,12 @@
       top: 0
       right: 0
       position: absolute
-      line-height: rem($dropdown-height)
+      line-height: rem($multiselect-height)
       padding-right: rem(12px)
       padding-left: rem(20px)
 
     &--highlight
-      background: $dropdown-color
+      background: $multiselect-color
       outline: none
       color: white
 
@@ -513,50 +569,50 @@
         color: white
 
     &--selected
-      background: $dropdown-color-secondary
-      color: $dropdown-color-text
+      background: $multiselect-color-secondary
+      color: $multiselect-color-text
       font-weight: bold
 
       &:after
         content: "Selected"
         font-weight: 300
-        color: darken($dropdown-color-secondary, 20%)
+        color: darken($multiselect-color-secondary, 20%)
 
-  .dropdown__option--selected.dropdown__option--highlight
-    background: $dropdown-remove-color
+  .multiselect__option--selected.multiselect__option--highlight
+    background: $multiselect-remove-color
     color: #fff
-    font-weight: $dropdown-font-weight
+    font-weight: $multiselect-font-weight
 
     &:after
       content: "Press enter to remove"
       color: #fff
 
-  .dropdown--disabled
-    background: darken($dropdown-background, 7%)
+  .multiselect--disabled
+    background: darken($multiselect-background, 7%)
     pointer-events: none
 
-    .dropdown__current,
-    .dropdown__select
-      background: darken($dropdown-background, 7%)
-      color: darken($dropdown-background, 35%)
+    .multiselect__current,
+    .multiselect__select
+      background: darken($multiselect-background, 7%)
+      color: darken($multiselect-background, 35%)
 
-  .dropdown__option--disabled
-    background: darken($dropdown-background, 7%)
-    color: darken($dropdown-background, 35%)
+  .multiselect__option--disabled
+    background: darken($multiselect-background, 7%)
+    color: darken($multiselect-background, 35%)
     cursor: text
     pointer-events: none
 
     &:visited
-      color: darken($dropdown-background, 35%)
+      color: darken($multiselect-background, 35%)
 
     &:hover,
     &:focus
-      background: darken($dropdown-hover-bg, 3%)
+      background: darken($multiselect-hover-bg, 3%)
 
-  .dropdown-transition
+  .multiselect-transition
     transition: all .3s ease
 
-  .dropdown-enter, .dropdown-leave
+  .multiselect-enter, .multiselect-leave
     opacity: 0
     max-height: 0 !important
 </style>
diff --git a/src/data/countries.json b/src/data/countries.json
new file mode 100644
index 00000000..50aed8cd
--- /dev/null
+++ b/src/data/countries.json
@@ -0,0 +1,974 @@
+[
+    {
+        "name": "Afghanistan",
+        "code": "AF"
+    },
+    {
+        "name": "Åland Islands",
+        "code": "AX"
+    },
+    {
+        "name": "Albania",
+        "code": "AL"
+    },
+    {
+        "name": "Algeria",
+        "code": "DZ"
+    },
+    {
+        "name": "American Samoa",
+        "code": "AS"
+    },
+    {
+        "name": "AndorrA",
+        "code": "AD"
+    },
+    {
+        "name": "Angola",
+        "code": "AO"
+    },
+    {
+        "name": "Anguilla",
+        "code": "AI"
+    },
+    {
+        "name": "Antarctica",
+        "code": "AQ"
+    },
+    {
+        "name": "Antigua and Barbuda",
+        "code": "AG"
+    },
+    {
+        "name": "Argentina",
+        "code": "AR"
+    },
+    {
+        "name": "Armenia",
+        "code": "AM"
+    },
+    {
+        "name": "Aruba",
+        "code": "AW"
+    },
+    {
+        "name": "Australia",
+        "code": "AU"
+    },
+    {
+        "name": "Austria",
+        "code": "AT"
+    },
+    {
+        "name": "Azerbaijan",
+        "code": "AZ"
+    },
+    {
+        "name": "Bahamas",
+        "code": "BS"
+    },
+    {
+        "name": "Bahrain",
+        "code": "BH"
+    },
+    {
+        "name": "Bangladesh",
+        "code": "BD"
+    },
+    {
+        "name": "Barbados",
+        "code": "BB"
+    },
+    {
+        "name": "Belarus",
+        "code": "BY"
+    },
+    {
+        "name": "Belgium",
+        "code": "BE"
+    },
+    {
+        "name": "Belize",
+        "code": "BZ"
+    },
+    {
+        "name": "Benin",
+        "code": "BJ"
+    },
+    {
+        "name": "Bermuda",
+        "code": "BM"
+    },
+    {
+        "name": "Bhutan",
+        "code": "BT"
+    },
+    {
+        "name": "Bolivia",
+        "code": "BO"
+    },
+    {
+        "name": "Bosnia and Herzegovina",
+        "code": "BA"
+    },
+    {
+        "name": "Botswana",
+        "code": "BW"
+    },
+    {
+        "name": "Bouvet Island",
+        "code": "BV"
+    },
+    {
+        "name": "Brazil",
+        "code": "BR"
+    },
+    {
+        "name": "British Indian Ocean Territory",
+        "code": "IO"
+    },
+    {
+        "name": "Brunei Darussalam",
+        "code": "BN"
+    },
+    {
+        "name": "Bulgaria",
+        "code": "BG"
+    },
+    {
+        "name": "Burkina Faso",
+        "code": "BF"
+    },
+    {
+        "name": "Burundi",
+        "code": "BI"
+    },
+    {
+        "name": "Cambodia",
+        "code": "KH"
+    },
+    {
+        "name": "Cameroon",
+        "code": "CM"
+    },
+    {
+        "name": "Canada",
+        "code": "CA"
+    },
+    {
+        "name": "Cape Verde",
+        "code": "CV"
+    },
+    {
+        "name": "Cayman Islands",
+        "code": "KY"
+    },
+    {
+        "name": "Central African Republic",
+        "code": "CF"
+    },
+    {
+        "name": "Chad",
+        "code": "TD"
+    },
+    {
+        "name": "Chile",
+        "code": "CL"
+    },
+    {
+        "name": "China",
+        "code": "CN"
+    },
+    {
+        "name": "Christmas Island",
+        "code": "CX"
+    },
+    {
+        "name": "Cocos (Keeling) Islands",
+        "code": "CC"
+    },
+    {
+        "name": "Colombia",
+        "code": "CO"
+    },
+    {
+        "name": "Comoros",
+        "code": "KM"
+    },
+    {
+        "name": "Congo",
+        "code": "CG"
+    },
+    {
+        "name": "Congo, The Democratic Republic of the",
+        "code": "CD"
+    },
+    {
+        "name": "Cook Islands",
+        "code": "CK"
+    },
+    {
+        "name": "Costa Rica",
+        "code": "CR"
+    },
+    {
+        "name": "Cote D\"Ivoire",
+        "code": "CI"
+    },
+    {
+        "name": "Croatia",
+        "code": "HR"
+    },
+    {
+        "name": "Cuba",
+        "code": "CU"
+    },
+    {
+        "name": "Cyprus",
+        "code": "CY"
+    },
+    {
+        "name": "Czech Republic",
+        "code": "CZ"
+    },
+    {
+        "name": "Denmark",
+        "code": "DK"
+    },
+    {
+        "name": "Djibouti",
+        "code": "DJ"
+    },
+    {
+        "name": "Dominica",
+        "code": "DM"
+    },
+    {
+        "name": "Dominican Republic",
+        "code": "DO"
+    },
+    {
+        "name": "Ecuador",
+        "code": "EC"
+    },
+    {
+        "name": "Egypt",
+        "code": "EG"
+    },
+    {
+        "name": "El Salvador",
+        "code": "SV"
+    },
+    {
+        "name": "Equatorial Guinea",
+        "code": "GQ"
+    },
+    {
+        "name": "Eritrea",
+        "code": "ER"
+    },
+    {
+        "name": "Estonia",
+        "code": "EE"
+    },
+    {
+        "name": "Ethiopia",
+        "code": "ET"
+    },
+    {
+        "name": "Falkland Islands (Malvinas)",
+        "code": "FK"
+    },
+    {
+        "name": "Faroe Islands",
+        "code": "FO"
+    },
+    {
+        "name": "Fiji",
+        "code": "FJ"
+    },
+    {
+        "name": "Finland",
+        "code": "FI"
+    },
+    {
+        "name": "France",
+        "code": "FR"
+    },
+    {
+        "name": "French Guiana",
+        "code": "GF"
+    },
+    {
+        "name": "French Polynesia",
+        "code": "PF"
+    },
+    {
+        "name": "French Southern Territories",
+        "code": "TF"
+    },
+    {
+        "name": "Gabon",
+        "code": "GA"
+    },
+    {
+        "name": "Gambia",
+        "code": "GM"
+    },
+    {
+        "name": "Georgia",
+        "code": "GE"
+    },
+    {
+        "name": "Germany",
+        "code": "DE"
+    },
+    {
+        "name": "Ghana",
+        "code": "GH"
+    },
+    {
+        "name": "Gibraltar",
+        "code": "GI"
+    },
+    {
+        "name": "Greece",
+        "code": "GR"
+    },
+    {
+        "name": "Greenland",
+        "code": "GL"
+    },
+    {
+        "name": "Grenada",
+        "code": "GD"
+    },
+    {
+        "name": "Guadeloupe",
+        "code": "GP"
+    },
+    {
+        "name": "Guam",
+        "code": "GU"
+    },
+    {
+        "name": "Guatemala",
+        "code": "GT"
+    },
+    {
+        "name": "Guernsey",
+        "code": "GG"
+    },
+    {
+        "name": "Guinea",
+        "code": "GN"
+    },
+    {
+        "name": "Guinea-Bissau",
+        "code": "GW"
+    },
+    {
+        "name": "Guyana",
+        "code": "GY"
+    },
+    {
+        "name": "Haiti",
+        "code": "HT"
+    },
+    {
+        "name": "Heard Island and Mcdonald Islands",
+        "code": "HM"
+    },
+    {
+        "name": "Holy See (Vatican City State)",
+        "code": "VA"
+    },
+    {
+        "name": "Honduras",
+        "code": "HN"
+    },
+    {
+        "name": "Hong Kong",
+        "code": "HK"
+    },
+    {
+        "name": "Hungary",
+        "code": "HU"
+    },
+    {
+        "name": "Iceland",
+        "code": "IS"
+    },
+    {
+        "name": "India",
+        "code": "IN"
+    },
+    {
+        "name": "Indonesia",
+        "code": "ID"
+    },
+    {
+        "name": "Iran, Islamic Republic Of",
+        "code": "IR"
+    },
+    {
+        "name": "Iraq",
+        "code": "IQ"
+    },
+    {
+        "name": "Ireland",
+        "code": "IE"
+    },
+    {
+        "name": "Isle of Man",
+        "code": "IM"
+    },
+    {
+        "name": "Israel",
+        "code": "IL"
+    },
+    {
+        "name": "Italy",
+        "code": "IT"
+    },
+    {
+        "name": "Jamaica",
+        "code": "JM"
+    },
+    {
+        "name": "Japan",
+        "code": "JP"
+    },
+    {
+        "name": "Jersey",
+        "code": "JE"
+    },
+    {
+        "name": "Jordan",
+        "code": "JO"
+    },
+    {
+        "name": "Kazakhstan",
+        "code": "KZ"
+    },
+    {
+        "name": "Kenya",
+        "code": "KE"
+    },
+    {
+        "name": "Kiribati",
+        "code": "KI"
+    },
+    {
+        "name": "Korea, Democratic People\"S Republic of",
+        "code": "KP"
+    },
+    {
+        "name": "Korea, Republic of",
+        "code": "KR"
+    },
+    {
+        "name": "Kuwait",
+        "code": "KW"
+    },
+    {
+        "name": "Kyrgyzstan",
+        "code": "KG"
+    },
+    {
+        "name": "Lao People\"S Democratic Republic",
+        "code": "LA"
+    },
+    {
+        "name": "Latvia",
+        "code": "LV"
+    },
+    {
+        "name": "Lebanon",
+        "code": "LB"
+    },
+    {
+        "name": "Lesotho",
+        "code": "LS"
+    },
+    {
+        "name": "Liberia",
+        "code": "LR"
+    },
+    {
+        "name": "Libyan Arab Jamahiriya",
+        "code": "LY"
+    },
+    {
+        "name": "Liechtenstein",
+        "code": "LI"
+    },
+    {
+        "name": "Lithuania",
+        "code": "LT"
+    },
+    {
+        "name": "Luxembourg",
+        "code": "LU"
+    },
+    {
+        "name": "Macao",
+        "code": "MO"
+    },
+    {
+        "name": "Macedonia, The Former Yugoslav Republic of",
+        "code": "MK"
+    },
+    {
+        "name": "Madagascar",
+        "code": "MG"
+    },
+    {
+        "name": "Malawi",
+        "code": "MW"
+    },
+    {
+        "name": "Malaysia",
+        "code": "MY"
+    },
+    {
+        "name": "Maldives",
+        "code": "MV"
+    },
+    {
+        "name": "Mali",
+        "code": "ML"
+    },
+    {
+        "name": "Malta",
+        "code": "MT"
+    },
+    {
+        "name": "Marshall Islands",
+        "code": "MH"
+    },
+    {
+        "name": "Martinique",
+        "code": "MQ"
+    },
+    {
+        "name": "Mauritania",
+        "code": "MR"
+    },
+    {
+        "name": "Mauritius",
+        "code": "MU"
+    },
+    {
+        "name": "Mayotte",
+        "code": "YT"
+    },
+    {
+        "name": "Mexico",
+        "code": "MX"
+    },
+    {
+        "name": "Micronesia, Federated States of",
+        "code": "FM"
+    },
+    {
+        "name": "Moldova, Republic of",
+        "code": "MD"
+    },
+    {
+        "name": "Monaco",
+        "code": "MC"
+    },
+    {
+        "name": "Mongolia",
+        "code": "MN"
+    },
+    {
+        "name": "Montserrat",
+        "code": "MS"
+    },
+    {
+        "name": "Morocco",
+        "code": "MA"
+    },
+    {
+        "name": "Mozambique",
+        "code": "MZ"
+    },
+    {
+        "name": "Myanmar",
+        "code": "MM"
+    },
+    {
+        "name": "Namibia",
+        "code": "NA"
+    },
+    {
+        "name": "Nauru",
+        "code": "NR"
+    },
+    {
+        "name": "Nepal",
+        "code": "NP"
+    },
+    {
+        "name": "Netherlands",
+        "code": "NL"
+    },
+    {
+        "name": "Netherlands Antilles",
+        "code": "AN"
+    },
+    {
+        "name": "New Caledonia",
+        "code": "NC"
+    },
+    {
+        "name": "New Zealand",
+        "code": "NZ"
+    },
+    {
+        "name": "Nicaragua",
+        "code": "NI"
+    },
+    {
+        "name": "Niger",
+        "code": "NE"
+    },
+    {
+        "name": "Nigeria",
+        "code": "NG"
+    },
+    {
+        "name": "Niue",
+        "code": "NU"
+    },
+    {
+        "name": "Norfolk Island",
+        "code": "NF"
+    },
+    {
+        "name": "Northern Mariana Islands",
+        "code": "MP"
+    },
+    {
+        "name": "Norway",
+        "code": "NO"
+    },
+    {
+        "name": "Oman",
+        "code": "OM"
+    },
+    {
+        "name": "Pakistan",
+        "code": "PK"
+    },
+    {
+        "name": "Palau",
+        "code": "PW"
+    },
+    {
+        "name": "Palestinian Territory, Occupied",
+        "code": "PS"
+    },
+    {
+        "name": "Panama",
+        "code": "PA"
+    },
+    {
+        "name": "Papua New Guinea",
+        "code": "PG"
+    },
+    {
+        "name": "Paraguay",
+        "code": "PY"
+    },
+    {
+        "name": "Peru",
+        "code": "PE"
+    },
+    {
+        "name": "Philippines",
+        "code": "PH"
+    },
+    {
+        "name": "Pitcairn",
+        "code": "PN"
+    },
+    {
+        "name": "Poland",
+        "code": "PL"
+    },
+    {
+        "name": "Portugal",
+        "code": "PT"
+    },
+    {
+        "name": "Puerto Rico",
+        "code": "PR"
+    },
+    {
+        "name": "Qatar",
+        "code": "QA"
+    },
+    {
+        "name": "Reunion",
+        "code": "RE"
+    },
+    {
+        "name": "Romania",
+        "code": "RO"
+    },
+    {
+        "name": "Russian Federation",
+        "code": "RU"
+    },
+    {
+        "name": "RWANDA",
+        "code": "RW"
+    },
+    {
+        "name": "Saint Helena",
+        "code": "SH"
+    },
+    {
+        "name": "Saint Kitts and Nevis",
+        "code": "KN"
+    },
+    {
+        "name": "Saint Lucia",
+        "code": "LC"
+    },
+    {
+        "name": "Saint Pierre and Miquelon",
+        "code": "PM"
+    },
+    {
+        "name": "Saint Vincent and the Grenadines",
+        "code": "VC"
+    },
+    {
+        "name": "Samoa",
+        "code": "WS"
+    },
+    {
+        "name": "San Marino",
+        "code": "SM"
+    },
+    {
+        "name": "Sao Tome and Principe",
+        "code": "ST"
+    },
+    {
+        "name": "Saudi Arabia",
+        "code": "SA"
+    },
+    {
+        "name": "Senegal",
+        "code": "SN"
+    },
+    {
+        "name": "Serbia and Montenegro",
+        "code": "CS"
+    },
+    {
+        "name": "Seychelles",
+        "code": "SC"
+    },
+    {
+        "name": "Sierra Leone",
+        "code": "SL"
+    },
+    {
+        "name": "Singapore",
+        "code": "SG"
+    },
+    {
+        "name": "Slovakia",
+        "code": "SK"
+    },
+    {
+        "name": "Slovenia",
+        "code": "SI"
+    },
+    {
+        "name": "Solomon Islands",
+        "code": "SB"
+    },
+    {
+        "name": "Somalia",
+        "code": "SO"
+    },
+    {
+        "name": "South Africa",
+        "code": "ZA"
+    },
+    {
+        "name": "South Georgia and the South Sandwich Islands",
+        "code": "GS"
+    },
+    {
+        "name": "Spain",
+        "code": "ES"
+    },
+    {
+        "name": "Sri Lanka",
+        "code": "LK"
+    },
+    {
+        "name": "Sudan",
+        "code": "SD"
+    },
+    {
+        "name": "Suriname",
+        "code": "SR"
+    },
+    {
+        "name": "Svalbard and Jan Mayen",
+        "code": "SJ"
+    },
+    {
+        "name": "Swaziland",
+        "code": "SZ"
+    },
+    {
+        "name": "Sweden",
+        "code": "SE"
+    },
+    {
+        "name": "Switzerland",
+        "code": "CH"
+    },
+    {
+        "name": "Syrian Arab Republic",
+        "code": "SY"
+    },
+    {
+        "name": "Taiwan, Province of China",
+        "code": "TW"
+    },
+    {
+        "name": "Tajikistan",
+        "code": "TJ"
+    },
+    {
+        "name": "Tanzania, United Republic of",
+        "code": "TZ"
+    },
+    {
+        "name": "Thailand",
+        "code": "TH"
+    },
+    {
+        "name": "Timor-Leste",
+        "code": "TL"
+    },
+    {
+        "name": "Togo",
+        "code": "TG"
+    },
+    {
+        "name": "Tokelau",
+        "code": "TK"
+    },
+    {
+        "name": "Tonga",
+        "code": "TO"
+    },
+    {
+        "name": "Trinidad and Tobago",
+        "code": "TT"
+    },
+    {
+        "name": "Tunisia",
+        "code": "TN"
+    },
+    {
+        "name": "Turkey",
+        "code": "TR"
+    },
+    {
+        "name": "Turkmenistan",
+        "code": "TM"
+    },
+    {
+        "name": "Turks and Caicos Islands",
+        "code": "TC"
+    },
+    {
+        "name": "Tuvalu",
+        "code": "TV"
+    },
+    {
+        "name": "Uganda",
+        "code": "UG"
+    },
+    {
+        "name": "Ukraine",
+        "code": "UA"
+    },
+    {
+        "name": "United Arab Emirates",
+        "code": "AE"
+    },
+    {
+        "name": "United Kingdom",
+        "code": "GB"
+    },
+    {
+        "name": "United States",
+        "code": "US"
+    },
+    {
+        "name": "United States Minor Outlying Islands",
+        "code": "UM"
+    },
+    {
+        "name": "Uruguay",
+        "code": "UY"
+    },
+    {
+        "name": "Uzbekistan",
+        "code": "UZ"
+    },
+    {
+        "name": "Vanuatu",
+        "code": "VU"
+    },
+    {
+        "name": "Venezuela",
+        "code": "VE"
+    },
+    {
+        "name": "Viet Nam",
+        "code": "VN"
+    },
+    {
+        "name": "Virgin Islands, British",
+        "code": "VG"
+    },
+    {
+        "name": "Virgin Islands, U.S.",
+        "code": "VI"
+    },
+    {
+        "name": "Wallis and Futuna",
+        "code": "WF"
+    },
+    {
+        "name": "Western Sahara",
+        "code": "EH"
+    },
+    {
+        "name": "Yemen",
+        "code": "YE"
+    },
+    {
+        "name": "Zambia",
+        "code": "ZM"
+    },
+    {
+        "name": "Zimbabwe",
+        "code": "ZW"
+    }
+]
diff --git a/test/unit/specs/Multiselect.spec.js b/test/unit/specs/Multiselect.spec.js
index e016e5ef..3f758885 100644
--- a/test/unit/specs/Multiselect.spec.js
+++ b/test/unit/specs/Multiselect.spec.js
@@ -41,7 +41,7 @@ describe('Multiselect.vue', () => {
             }
           }).$mount()
           expect(vm.$children[0].selected).to.deep.equal(vm.value)
-          expect(vm.$children[0].$els.tags.querySelector('.dropdown__tag').textContent).to.contain('1')
+          expect(vm.$children[0].$els.tags.querySelector('.multiselect__tag').textContent).to.contain('1')
         })
 
         it('should preselect passed array of objects', () => {
@@ -54,7 +54,7 @@ describe('Multiselect.vue', () => {
             }
           }).$mount()
           expect(vm.$children[0].selected).to.deep.equal(vm.value)
-          expect(vm.$children[0].$els.tags.querySelector('.dropdown__tag').textContent).to.contain('2')
+          expect(vm.$children[0].$els.tags.querySelector('.multiselect__tag').textContent).to.contain('2')
         })
 
         it('should preselect passed array of objects in different order', () => {
@@ -67,7 +67,7 @@ describe('Multiselect.vue', () => {
             }
           }).$mount()
           expect(vm.$children[0].selected).to.deep.equal(vm.value)
-          expect(vm.$children[0].$els.tags.querySelector('.dropdown__tag').textContent).to.contain('3')
+          expect(vm.$children[0].$els.tags.querySelector('.multiselect__tag').textContent).to.contain('3')
         })
       })
 
@@ -110,7 +110,7 @@ describe('Multiselect.vue', () => {
           }
         }).$mount()
         expect(vm.$children[0].selected).to.deep.equal(vm.value)
-        expect(vm.$children[0].$els.tags.querySelector('.dropdown__single').textContent).to.contain('1')
+        expect(vm.$children[0].$els.tags.querySelector('.multiselect__single').textContent).to.contain('1')
       })
 
       it('should preselect passed object', () => {
@@ -123,7 +123,7 @@ describe('Multiselect.vue', () => {
           }
         }).$mount()
         expect(vm.$children[0].selected).to.deep.equal(vm.value)
-        expect(vm.$children[0].$els.tags.querySelector('.dropdown__single').textContent).to.contain('2')
+        expect(vm.$children[0].$els.tags.querySelector('.multiselect__single').textContent).to.contain('2')
       })
     })
   })
@@ -226,6 +226,24 @@ describe('Multiselect.vue', () => {
         expect(vm.$children[0].value).to.deep.equal({ name: '2' })
       })
     })
+    describe('when closeOnSelect == FALSE', () => {
+      it('should not close the dropdown', () => {
+        const vm = new Vue({
+          template: '<multiselect :selected="value" :options="source" label="name" :close-on-select="false"></multiselect>',
+          components: { Multiselect },
+          data: {
+            value: [],
+            source: [{ name: '1' }, { name: '2' }, { name: '3' }]
+          }
+        }).$mount()
+        const spy = sinon.spy(vm.$children[0], 'deactivate')
+        vm.$children[0].activate()
+        vm.$children[0].select(vm.source[0])
+        Vue.nextTick(function () {
+          expect(spy.called).to.equal(false)
+        })
+      })
+    })
   })
 
   describe('#removeElement()', () => {
@@ -453,6 +471,59 @@ describe('Multiselect.vue', () => {
     })
   })
 
+  describe('#watch:search', () => {
+    it('calls onSearchChange(searchQuery) callback when onSearchChange prop is set', (done) => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :options="source" label="name" :searchable="true" :on-search-change="afterSearch"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: null,
+          source: [{ name: '1' }, { name: '2' }, { name: '3' }],
+          query: ''
+        },
+        methods: {
+          afterSearch (query) {
+            this.query = query
+          }
+        }
+      }).$mount()
+      vm.$children[0].search = 'test'
+      Vue.nextTick(function () {
+        expect(vm.query).to.equal('test')
+        done()
+      })
+    })
+    it('sets loading status to TRUE until the options change', (done) => {
+      const vm = new Vue({
+        template: '<multiselect :selected="value" :options="source" label="name" :searchable="true" :on-search-change="afterSearch"></multiselect>',
+        components: { Multiselect },
+        data: {
+          value: null,
+          source: [{ name: '1' }, { name: '2' }, { name: '3' }],
+          query: ''
+        },
+        methods: {
+          afterSearch (query) {
+            setTimeout(() => {
+              this.source = [{ name: '1' }]
+            }, 10)
+          }
+        }
+      }).$mount()
+      expect(vm.$children[0].options).to.deep.equal(vm.source)
+      vm.$children[0].search = '1'
+      Vue.nextTick(function () {
+        expect(vm.$children[0].loading).to.equal(true)
+      })
+
+      setTimeout(() => {
+        expect(vm.$children[0].loading).to.equal(false)
+        expect(vm.$children[0].options).to.deep.equal([{ name: '1' }])
+        done()
+      }, 20)
+    })
+  })
+
   describe('#activate()', () => {
     it('should set isOpen value to true', (done) => {
       const vm = new Vue({
@@ -557,6 +628,7 @@ describe('Multiselect.vue', () => {
           source: [{ name: '1' }, { name: '2' }, { name: '3' }]
         }
       }).$mount()
+      vm.$children[0].activate()
       vm.$children[0].touched = false
       vm.$children[0].deactivate()
       Vue.nextTick(function () {
@@ -574,9 +646,11 @@ describe('Multiselect.vue', () => {
           source: [{ name: '1' }, { name: '2' }, { name: '3' }]
         }
       }).$mount()
+      vm.$children[0].activate()
       vm.$children[0].search = '1'
       vm.$children[0].deactivate()
       Vue.nextTick(function () {
+        expect(vm.$children[0].loading).to.equal(false)
         expect(vm.$children[0].search).to.equal('')
         done()
       })
@@ -591,9 +665,11 @@ describe('Multiselect.vue', () => {
           source: [{ name: '1' }, { name: '2' }, { name: '3' }]
         }
       }).$mount()
+      vm.$children[0].activate()
       vm.$children[0].search = '1'
       vm.$children[0].deactivate()
       Vue.nextTick(function () {
+        expect(vm.$children[0].loading).to.equal(false)
         expect(vm.$children[0].search).to.equal('2')
         done()
       })