From cd4bba1a5bb1d7d777ea091efa984164faed986e Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Wed, 11 Jul 2018 12:29:55 +0300
Subject: [PATCH 01/18] 2 possibilities to unselect value

---
 .../VuesticSimpleSelect.vue                   | 203 ++++++++++--------
 1 file changed, 111 insertions(+), 92 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 0a9251a55..b1687dbcd 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -9,9 +9,15 @@
         :class="{'has-value': !!value}"
         v-model="displayValue"
         :name="name"
-        :options="options"/>
-      <i class="ion ion-ios-arrow-down icon-right input-icon"></i>
-      <label class="control-label">{{label}}</label><i class="bar"></i>
+        :options="options">
+      <div v-show="selectedValue !== ''">
+        <i
+          class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
+          @click="deselectOption"
+        />
+      </div>
+      <i class="ion ion-ios-arrow-down icon-right input-icon"/>
+      <label class="control-label">{{label}}</label><i class="bar"/>
       <small v-show="hasErrors()" class="help text-danger">
         {{ showRequiredError() }}
       </small>
@@ -23,7 +29,7 @@
           <div class="dropdown-item"
                :class="{'selected': isOptionSelected(option)}"
                v-for="option in filteredList"
-               @click="selectOption(option)">
+               @click="toggleSelection(option)">
             <span
               class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
           </div>
@@ -34,107 +40,120 @@
 </template>
 
 <script>
-  import Dropdown from 'vuestic-directives/Dropdown'
-  import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
+import Dropdown from 'vuestic-directives/Dropdown'
+import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
 
-  export default {
-    name: 'vuestic-simple-select',
-    components: {
-      Scrollbar
+export default {
+  name: 'vuestic-simple-select',
+  components: {
+    Scrollbar
+  },
+  directives: {
+    dropdown: Dropdown
+  },
+  props: {
+    label: String,
+    options: Array,
+    value: {
+      default: '',
+      required: true
     },
-    directives: {
-      dropdown: Dropdown
+    optionKey: String,
+    required: {
+      type: Boolean,
+      default: false
     },
-    props: {
-      label: String,
-      options: Array,
-      value: {
-        default: '',
-        required: true
-      },
-      optionKey: String,
-      required: {
-        type: Boolean,
-        default: false
-      },
-      name: {
-        type: String,
-        default: 'simple-select'
+    name: {
+      type: String,
+      default: 'simple-select'
+    },
+  },
+  data () {
+    return {
+      validated: false,
+      displayValue: this.value,
+      selectedValue: ''
+    }
+  },
+  watch: {
+    value: {
+      handler (value) {
+        if (this.optionKey) {
+          this.displayValue = value[this.optionKey]
+        } else {
+          this.displayValue = value || ''
+        }
       },
+      immediate: true,
+    }
+  },
+  computed: {
+    filteredList () {
+      const optionKey = this.optionKey
+      const displayValue = this.displayValue
+      return this.options.filter(function (item) {
+        if (optionKey && item[optionKey]) {
+          return item[optionKey].search(displayValue) === 0
+        } else {
+          return item.search(displayValue) === 0
+        }
+      })
+    },
+  },
+  methods: {
+    toggleSelection (option) {
+      this.isOptionSelected(option) ? this.deselectOption() : this.selectOption(option)
+    },
+    deselectOption () {
+      this.selectedValue = ''
+      this.$emit('input', this.selectedValue)
+    },
+    showDropdown () {
+      this.displayValue = ''
+    },
+    isOptionSelected (option) {
+      return this.selectedValue === option
+    },
+    selectOption (option) {
+      this.displayValue = option
+      this.selectedValue = option
+      this.$emit('input', option)
+    },
+    validate () {
+      this.validated = true
     },
-    data () {
-      return {
-        validated: false,
-        displayValue: this.value
+    isValid () {
+      let isValid = true
+      if (this.required) {
+        isValid = !!this.value
       }
+      return isValid
     },
-    watch: {
-      value: {
-        handler (value) {
-          if (this.optionKey) {
-            this.displayValue = value[this.optionKey]
-          } else {
-            this.displayValue = value || ''
-          }
-        },
-        immediate: true,
+    hasErrors () {
+      let hasErrors = false
+      if (this.required) {
+        hasErrors = this.validated && !this.value
       }
+      return hasErrors
     },
-    computed: {
-      filteredList () {
-        const optionKey = this.optionKey
-        const displayValue = this.displayValue
-        return this.options.filter(function (item) {
-          if (optionKey && item[optionKey]) {
-            return item[optionKey].search(displayValue) === 0
-          } else {
-            return item.search(displayValue) === 0
-          }
-        })
-      },
+    showRequiredError () {
+      return `The ${this.name} field is required`
     },
-    methods: {
-      showDropdown () {
-        this.displayValue = ''
-      },
-      isOptionSelected (option) {
-        return this.displayValue === option
-      },
-      selectOption (option) {
-        this.displayValue = option
-        this.$emit('input', option)
-      },
-      validate () {
-        this.validated = true
-      },
-      isValid () {
-        let isValid = true
-        if (this.required) {
-          isValid = !!this.value
-        }
-        return isValid
-      },
-      hasErrors () {
-        let hasErrors = false
-        if (this.required) {
-          hasErrors = this.validated && !this.value
-        }
-        return hasErrors
-      },
-      showRequiredError () {
-        return `The ${this.name} field is required`
-      },
-    }
   }
+}
 </script>
 
-<style lang="scss">
-  .select-form-group {
-    .dropdown-menu {
-      padding: 0;
-      .vuestic-scrollbar {
-        height: $dropdown-item-height * 4;
-      }
+<style lang="scss" scoped>
+.select-form-group {
+  &__unselect {
+    padding-right: 20px;
+    cursor: pointer;
+  }
+  .dropdown-menu {
+    padding: 0;
+    .vuestic-scrollbar {
+      height: $dropdown-item-height * 4;
     }
   }
+}
 </style>

From edb0288663622d3765a59ccf0c15d760e0788fa0 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Wed, 11 Jul 2018 13:02:59 +0300
Subject: [PATCH 02/18] add clearable props

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue           | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index b1687dbcd..d4502b8bb 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -10,7 +10,7 @@
         v-model="displayValue"
         :name="name"
         :options="options">
-      <div v-show="selectedValue !== ''">
+      <div v-if="clearable && selectedValue !== ''">
         <i
           class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
           @click="deselectOption"
@@ -63,6 +63,10 @@ export default {
       type: Boolean,
       default: false
     },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
     name: {
       type: String,
       default: 'simple-select'

From 0e70d365c00d39186ca266550da6fdb8edee1183 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Wed, 11 Jul 2018 13:13:55 +0300
Subject: [PATCH 03/18] minor

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index d4502b8bb..61c27870f 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -10,7 +10,7 @@
         v-model="displayValue"
         :name="name"
         :options="options">
-      <div v-if="clearable && selectedValue !== ''">
+      <div v-if="clearable && selectedValue !== '' && displayValue !== ''">
         <i
           class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
           @click="deselectOption"

From 77a098962fd6b71ed5965153b17b5f1896dd788e Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Wed, 11 Jul 2018 17:24:51 +0300
Subject: [PATCH 04/18] add placeholder

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 61c27870f..dc85ad3fd 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -9,7 +9,8 @@
         :class="{'has-value': !!value}"
         v-model="displayValue"
         :name="name"
-        :options="options">
+        :options="options"
+        :placeholder="selectedValue">
       <div v-if="clearable && selectedValue !== '' && displayValue !== ''">
         <i
           class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"

From efe72b36f3e33741ed5b4a85dcccea14969279f1 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Wed, 11 Jul 2018 18:10:44 +0300
Subject: [PATCH 05/18] fix bug with objects

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue              | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index dc85ad3fd..5c910c2cf 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -11,7 +11,7 @@
         :name="name"
         :options="options"
         :placeholder="selectedValue">
-      <div v-if="clearable && selectedValue !== '' && displayValue !== ''">
+      <div v-if="clearable && selectedValue !== '' && displayValue !== '' && selectedValue !== undefined">
         <i
           class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
           @click="deselectOption"
@@ -85,6 +85,7 @@ export default {
       handler (value) {
         if (this.optionKey) {
           this.displayValue = value[this.optionKey]
+          this.selectedValue = value[this.optionKey]
         } else {
           this.displayValue = value || ''
         }

From 5077e7259fbdab17c31c29209154347b91511810 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Thu, 12 Jul 2018 14:23:40 +0300
Subject: [PATCH 06/18] problem with cross

---
 .../VuesticSimpleSelect.demo.vue              | 28 ++++++++++---------
 .../VuesticSimpleSelect.vue                   | 12 ++++----
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue
index 378e48412..5c5b522df 100644
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.demo.vue
@@ -1,17 +1,19 @@
 <template>
-  <div class="row justify-content-around">
-    <vuestic-simple-select
-      style="width: 240px; padding-top: 400px"
-      label="Select country"
-      v-model="selectedCountry"
-      :options="CountriesList"
-    />
-    <vuestic-simple-select
-      style="width: 240px"
-      label="Select country duplicate"
-      v-model="selectedCountry"
-      :options="CountriesList"
-    />
+  <div class="demo-container">
+    <div class="demo-container__item">
+      <vuestic-simple-select
+        label="Select country"
+        v-model="selectedCountry"
+        :options="CountriesList"
+      />
+    </div>
+    <div class="demo-container__item">
+      <vuestic-simple-select
+        label="Select country duplicate"
+        v-model="selectedCountry"
+        :options="CountriesList"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 5c910c2cf..5ace9adf7 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -11,18 +11,18 @@
         :name="name"
         :options="options"
         :placeholder="selectedValue">
-      <div v-if="clearable && selectedValue !== '' && displayValue !== '' && selectedValue !== undefined">
-        <i
-          class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
-          @click="deselectOption"
-        />
-      </div>
       <i class="ion ion-ios-arrow-down icon-right input-icon"/>
       <label class="control-label">{{label}}</label><i class="bar"/>
       <small v-show="hasErrors()" class="help text-danger">
         {{ showRequiredError() }}
       </small>
     </div>
+    <div v-if="clearable && selectedValue !== '' && displayValue !== '' && selectedValue !== undefined">
+      <i
+        class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
+        @click="deselectOption"
+      />
+    </div>
     <div
       class="dropdown-menu" aria-labelledby="dropdownMenuButton">
       <scrollbar ref="scrollbar">

From 3a58252af1d442eb35e7e91aa11e02882257d57d Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Sun, 15 Jul 2018 22:53:44 +0300
Subject: [PATCH 07/18] minor

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue           | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 5ace9adf7..fa33c1e5a 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -6,6 +6,7 @@
     <div class="input-group dropdown-toggle">
       <input
         @focus="showDropdown()"
+        @blur="closeDropdown()"
         :class="{'has-value': !!value}"
         v-model="displayValue"
         :name="name"
@@ -117,6 +118,11 @@ export default {
     showDropdown () {
       this.displayValue = ''
     },
+    closeDropdown () {
+      if (this.selectedValue !== '') {
+        this.displayValue = this.selectedValue
+      }
+    },
     isOptionSelected (option) {
       return this.selectedValue === option
     },

From 2f09c2fb95508e4890127dcdb8e7d579feeea546 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Mon, 16 Jul 2018 15:15:11 +0300
Subject: [PATCH 08/18] refactor logic

---
 .../VuesticSimpleSelect.vue                   | 76 +++++++++++--------
 1 file changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index fa33c1e5a..bc6a1d3cd 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -4,24 +4,30 @@
     v-dropdown.isBlocked
     :class="{'has-error': hasErrors()}">
     <div class="input-group dropdown-toggle">
-      <input
-        @focus="showDropdown()"
-        @blur="closeDropdown()"
-        :class="{'has-value': !!value}"
-        v-model="displayValue"
-        :name="name"
-        :options="options"
-        :placeholder="selectedValue">
-      <i class="ion ion-ios-arrow-down icon-right input-icon"/>
-      <label class="control-label">{{label}}</label><i class="bar"/>
-      <small v-show="hasErrors()" class="help text-danger">
-        {{ showRequiredError() }}
-      </small>
+      <div>
+        <input
+          @focus="showDropdown()"
+          :class="{'has-value': !!value}"
+          v-model="displayValue"
+          :name="name"
+          :options="options"
+          :placeholder="selectedValue">
+        <label class="control-label">{{label}}</label><i class="bar"/>
+        <small v-show="hasErrors()" class="help text-danger">
+          {{ showRequiredError() }}
+        </small>
+      </div>
+      <div>
+        <i
+          class="ion ion-ios-arrow-down icon-right input-icon dropdown-ion"
+          @click="showDropdown"
+        />
+      </div>
     </div>
-    <div v-if="clearable && selectedValue !== '' && displayValue !== '' && selectedValue !== undefined">
+    <div v-if="isClearable">
       <i
         class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
-        @click="deselectOption"
+        @click="unselectOption"
       />
     </div>
     <div
@@ -98,31 +104,33 @@ export default {
     filteredList () {
       const optionKey = this.optionKey
       const displayValue = this.displayValue
-      return this.options.filter(function (item) {
-        if (optionKey && item[optionKey]) {
-          return item[optionKey].search(displayValue) === 0
-        } else {
-          return item.search(displayValue) === 0
-        }
-      })
+      if (displayValue === '') {
+        return this.options
+      } else {
+        return this.options.filter(function (item) {
+          if (optionKey && item[optionKey]) {
+            return item[optionKey].search(displayValue) === 0
+          } else {
+            return item.search(displayValue) === 0
+          }
+        })
+      }
     },
+    isClearable () {
+      return (this.clearable && this.selectedValue !== '' && this.displayValue !== '' && this.selectedValue !== undefined)
+    }
   },
   methods: {
     toggleSelection (option) {
-      this.isOptionSelected(option) ? this.deselectOption() : this.selectOption(option)
+      this.isOptionSelected(option) ? this.unselectOption() : this.selectOption(option)
     },
-    deselectOption () {
+    unselectOption () {
       this.selectedValue = ''
       this.$emit('input', this.selectedValue)
     },
     showDropdown () {
       this.displayValue = ''
     },
-    closeDropdown () {
-      if (this.selectedValue !== '') {
-        this.displayValue = this.selectedValue
-      }
-    },
     isOptionSelected (option) {
       return this.selectedValue === option
     },
@@ -150,7 +158,7 @@ export default {
     },
     showRequiredError () {
       return `The ${this.name} field is required`
-    },
+    }
   }
 }
 </script>
@@ -158,9 +166,15 @@ export default {
 <style lang="scss" scoped>
 .select-form-group {
   &__unselect {
-    padding-right: 20px;
+    margin-right: 20px;
+    cursor: pointer;
+  }
+
+  .dropdown-ion{
+    top: 12px;
     cursor: pointer;
   }
+
   .dropdown-menu {
     padding: 0;
     .vuestic-scrollbar {

From 4604667ea0862de394889013d9a2eb08a922e323 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Mon, 16 Jul 2018 18:25:36 +0300
Subject: [PATCH 09/18] minor

---
 .../VuesticMultiSelect.demo.vue               |  36 ++++
 .../VuesticMultiSelect.vue                    | 198 ++++++++++--------
 2 files changed, 150 insertions(+), 84 deletions(-)
 create mode 100644 src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue

diff --git a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue
new file mode 100644
index 000000000..6e734caa7
--- /dev/null
+++ b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.demo.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-container__item">
+      <vuestic-multi-select
+        label="Select country"
+        v-model="selectedCountries"
+        :options="CountriesList"
+      />
+    </div>
+    <div class="demo-container__item">
+      <vuestic-multi-select
+        label="Select country duplicate"
+        v-model="selectedCountries"
+        :options="CountriesList"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import CountriesList from 'data/CountriesList'
+import VuesticMultiSelect from './VuesticMultiSelect'
+
+export default {
+  components: {
+    VuesticMultiSelect,
+  },
+  data () {
+    return {
+      selectedCountries: [],
+      CountriesList,
+    }
+  },
+}
+</script>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
index 2452df512..369923f61 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
@@ -8,9 +8,15 @@
         :class="{'has-value': !!displayValue}"
         v-bind:value="displayValue"
         required/>
-      <i class="ion ion-ios-arrow-down icon-right input-icon"></i>
       <label class="control-label">{{label}}</label><i class="bar"></i>
       <small v-show="hasErrors()" class="help text-danger">{{ showRequiredError() }}</small>
+      <i class="ion ion-ios-arrow-down icon-right input-icon dropdown-ion"></i>
+    </div>
+    <div v-if="isClearable">
+      <i
+        class="fa fa-close icon-cross icon-right input-icon multiselect-form-group__unselect"
+        @click="unselectOptions"
+      />
     </div>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
       <scrollbar ref="scrollbar">
@@ -28,102 +34,126 @@
 </template>
 
 <script>
-  import Dropdown from 'vuestic-directives/Dropdown'
-  import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
+import Dropdown from 'vuestic-directives/Dropdown'
+import Scrollbar from '../vuestic-scrollbar/VuesticScrollbar.vue'
 
-  export default {
-    name: 'vuestic-multi-select',
-    components: {
-      Scrollbar
+export default {
+  name: 'vuestic-multi-select',
+  components: {
+    Scrollbar
+  },
+  directives: {
+    dropdown: Dropdown
+  },
+  data () {
+    return {
+      displayValue: '',
+      validated: false
+    }
+  },
+  props: {
+    label: String,
+    itemsChosenPlaceholder: {
+      type: String,
+      default: 'chosen'
     },
-    directives: {
-      dropdown: Dropdown
+    clearable: {
+      type: Boolean,
+      default: true
     },
-    data () {
-      return {
-        displayValue: '',
-        validated: false
-      }
+    options: Array,
+    value: Array,
+    optionKey: String,
+    required: {
+      type: Boolean,
+      default: false
+    },
+    name: {
+      type: String,
+      default: 'multiselect'
+    }
+  },
+  mounted () {
+    this.$emit('input', this.value)
+  },
+
+  updated: function () {
+    this.updateDisplayValue(this.value)
+  },
+
+  methods: {
+    unselectOptions () {
+      this.value.splice(0, this.value.length)
+      this.displayValue = ''
+      this.$emit('input', this.value)
+    },
+    toggleSelection (option) {
+      let newVal = this.isOptionSelected(option) ? this.deselectOption(option) : this.selectOption(option)
+      this.updateDisplayValue(newVal)
+      this.$emit('input', newVal)
+    },
+    isOptionSelected (option) {
+      return this.value.includes(option)
+    },
+    selectOption (option) {
+      return this.value.concat(option)
+    },
+    deselectOption (option) {
+      return this.value.filter(item => item !== option)
     },
-    props: {
-      label: String,
-      itemsChosenPlaceholder: {
-        type: String,
-        default: 'chosen'
-      },
-      options: Array,
-      value: Array,
-      optionKey: String,
-      required: {
-        type: Boolean,
-        default: false
-      },
-      name: {
-        type: String,
-        default: 'multiselect'
+    updateDisplayValue (newVal) {
+      if (newVal.length > 2) {
+        this.displayValue = `${newVal.length}/${this.options.length} ${this.itemsChosenPlaceholder}`
+      } else {
+        this.displayValue = (this.optionKey ? newVal.map(item => item[this.optionKey]) : newVal).join(', ')
       }
     },
-    mounted () {
-      this.$emit('input', this.value)
+    validate () {
+      this.validated = true
     },
-
-    updated: function () {
-      this.updateDisplayValue(this.value)
+    isValid () {
+      let isValid = true
+      if (this.required) {
+        isValid = !!this.displayValue
+      }
+      return isValid
     },
-
-    methods: {
-      toggleSelection (option) {
-        let newVal = this.isOptionSelected(option) ? this.deselectOption(option) : this.selectOption(option)
-        this.updateDisplayValue(newVal)
-        this.$emit('input', newVal)
-      },
-      isOptionSelected (option) {
-        return this.value.includes(option)
-      },
-      selectOption (option) {
-        return this.value.concat(option)
-      },
-      deselectOption (option) {
-        return this.value.filter(item => item !== option)
-      },
-      updateDisplayValue (newVal) {
-        if (newVal.length > 2) {
-          this.displayValue = `${newVal.length}/${this.options.length} ${this.itemsChosenPlaceholder}`
-        } else {
-          this.displayValue = (this.optionKey ? newVal.map(item => item[this.optionKey]) : newVal).join(', ')
-        }
-      },
-      validate () {
-        this.validated = true
-      },
-      isValid () {
-        let isValid = true
-        if (this.required) {
-          isValid = !!this.displayValue
-        }
-        return isValid
-      },
-      hasErrors () {
-        let hasErrors = false
-        if (this.required) {
-          hasErrors = this.validated && !this.displayValue
-        }
-        return hasErrors
-      },
-      showRequiredError () {
-        return `The ${this.name} field is required`
+    hasErrors () {
+      let hasErrors = false
+      if (this.required) {
+        hasErrors = this.validated && !this.displayValue
       }
+      return hasErrors
+    },
+    showRequiredError () {
+      return `The ${this.name} field is required`
+    }
+  },
+  computed: {
+    isClearable () {
+      return (this.clearable && this.value.length !== 0 && this.displayValue !== '')
     }
   }
+}
 </script>
 
-<style lang="scss">
-  .multiselect-form-group {
-    .dropdown-menu {
-      padding: 0;
-      .vuestic-scrollbar {
-        height: $dropdown-item-height * 4;
-      }
+<style lang="scss" scoped>
+.multiselect-form-group {
+  &__unselect {
+    margin-right: 20px;
+    cursor: pointer;
+  }
+
+  .dropdown-ion {
+    top: 12px;
+    cursor: pointer;
+  }
+
+  .dropdown-menu {
+    padding: 0;
+    .vuestic-scrollbar {
+      height: $dropdown-item-height * 4;
     }
   }
+}
 </style>

From cd5ed82b3fd086e31d35a2b77f7c777a406988d8 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Mon, 16 Jul 2018 20:08:28 +0300
Subject: [PATCH 10/18] fix styles and cross logic + placeholder

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue      | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index bc6a1d3cd..02fa154e2 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -11,7 +11,7 @@
           v-model="displayValue"
           :name="name"
           :options="options"
-          :placeholder="selectedValue">
+          :placeholder="placeholder">
         <label class="control-label">{{label}}</label><i class="bar"/>
         <small v-show="hasErrors()" class="help text-danger">
           {{ showRequiredError() }}
@@ -92,7 +92,6 @@ export default {
       handler (value) {
         if (this.optionKey) {
           this.displayValue = value[this.optionKey]
-          this.selectedValue = value[this.optionKey]
         } else {
           this.displayValue = value || ''
         }
@@ -118,6 +117,13 @@ export default {
     },
     isClearable () {
       return (this.clearable && this.selectedValue !== '' && this.displayValue !== '' && this.selectedValue !== undefined)
+    },
+    placeholder () {
+      if (this.optionKey !== undefined) {
+        return this.selectedValue[this.optionKey]
+      } else {
+        return this.selectedValue
+      }
     }
   },
   methods: {

From a90265df058ceff566bb98ac1127d9efdb53419f Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Tue, 17 Jul 2018 17:00:16 +0300
Subject: [PATCH 11/18] fix bug with reactivity

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 02fa154e2..6de5f4f33 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -8,7 +8,7 @@
         <input
           @focus="showDropdown()"
           :class="{'has-value': !!value}"
-          v-model="displayValue"
+          v-bind:value="displayValue"
           :name="name"
           :options="options"
           :placeholder="placeholder">
@@ -35,8 +35,8 @@
       <scrollbar ref="scrollbar">
         <div class="dropdown-menu-content">
           <div class="dropdown-item"
-               :class="{'selected': isOptionSelected(option)}"
                v-for="option in filteredList"
+               :class="{'selected': isOptionSelected(option)}"
                @click="toggleSelection(option)">
             <span
               class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
@@ -84,7 +84,7 @@ export default {
     return {
       validated: false,
       displayValue: this.value,
-      selectedValue: ''
+      selectedValue: this.value
     }
   },
   watch: {
@@ -92,8 +92,10 @@ export default {
       handler (value) {
         if (this.optionKey) {
           this.displayValue = value[this.optionKey]
+          this.selectedValue = value[this.optionKey]
         } else {
           this.displayValue = value || ''
+          this.selectedValue = value || ''
         }
       },
       immediate: true,
@@ -142,8 +144,8 @@ export default {
     },
     selectOption (option) {
       this.displayValue = option
-      this.selectedValue = option
-      this.$emit('input', option)
+      this.selectedValue = this.displayValue
+      this.$emit('input', this.selectedValue)
     },
     validate () {
       this.validated = true
@@ -176,7 +178,7 @@ export default {
     cursor: pointer;
   }
 
-  .dropdown-ion{
+  .dropdown-ion {
     top: 12px;
     cursor: pointer;
   }
@@ -189,3 +191,4 @@ export default {
   }
 }
 </style>
+

From dc10f930301626bcc1a9ea82b756dcd371231241 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Tue, 17 Jul 2018 18:57:51 +0300
Subject: [PATCH 12/18] minor

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 6de5f4f33..4e6465382 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -8,7 +8,7 @@
         <input
           @focus="showDropdown()"
           :class="{'has-value': !!value}"
-          v-bind:value="displayValue"
+          v-model="displayValue"
           :name="name"
           :options="options"
           :placeholder="placeholder">

From ec9d64f0a3ddcffba0eeaffa8cbce8a482465476 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Tue, 17 Jul 2018 19:35:36 +0300
Subject: [PATCH 13/18] fix bug with handle object

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 4e6465382..5603591d4 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -121,7 +121,7 @@ export default {
       return (this.clearable && this.selectedValue !== '' && this.displayValue !== '' && this.selectedValue !== undefined)
     },
     placeholder () {
-      if (this.optionKey !== undefined) {
+      if (this.optionKey && this.selectedValue) {
         return this.selectedValue[this.optionKey]
       } else {
         return this.selectedValue
@@ -140,7 +140,11 @@ export default {
       this.displayValue = ''
     },
     isOptionSelected (option) {
-      return this.selectedValue === option
+      if (this.optionKey) {
+        return this.selectedValue === option[this.optionKey]
+      } else {
+        return this.selectedValue === option
+      }
     },
     selectOption (option) {
       this.displayValue = option

From 7a41138f6a23530de12f8a6a8eaafac031dd9c07 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Wed, 18 Jul 2018 11:35:04 +0300
Subject: [PATCH 14/18] fix placeholder bug

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue         | 8 ++++++--
 src/vuestic-theme/vuestic-directives/Dropdown.js          | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 5603591d4..4caf67168 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -10,6 +10,7 @@
           :class="{'has-value': !!value}"
           v-model="displayValue"
           :name="name"
+          @blur="closeDropdown()"
           :options="options"
           :placeholder="placeholder">
         <label class="control-label">{{label}}</label><i class="bar"/>
@@ -37,7 +38,7 @@
           <div class="dropdown-item"
                v-for="option in filteredList"
                :class="{'selected': isOptionSelected(option)}"
-               @click="toggleSelection(option)">
+               @mousedown="toggleSelection(option)">
             <span
               class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
           </div>
@@ -91,8 +92,8 @@ export default {
     value: {
       handler (value) {
         if (this.optionKey) {
-          this.displayValue = value[this.optionKey]
           this.selectedValue = value[this.optionKey]
+          this.displayValue = value[this.optionKey]
         } else {
           this.displayValue = value || ''
           this.selectedValue = value || ''
@@ -139,6 +140,9 @@ export default {
     showDropdown () {
       this.displayValue = ''
     },
+    closeDropdown () {
+      this.displayValue = this.selectedValue
+    },
     isOptionSelected (option) {
       if (this.optionKey) {
         return this.selectedValue === option[this.optionKey]
diff --git a/src/vuestic-theme/vuestic-directives/Dropdown.js b/src/vuestic-theme/vuestic-directives/Dropdown.js
index 739fe114e..6e6a42085 100644
--- a/src/vuestic-theme/vuestic-directives/Dropdown.js
+++ b/src/vuestic-theme/vuestic-directives/Dropdown.js
@@ -49,7 +49,7 @@ export default {
     }
 
     if (dropdownItem) {
-      dropdownItem.addEventListener('click', () => {
+      dropdownItem.addEventListener('mousedown', () => {
         if (dropdownIon) {
           if (dropdownIon.classList.contains('ion-ios-arrow-up')) {
             dropdownIon.classList.remove('ion-ios-arrow-up')

From db5387c28c414ce6bc2957794ee8a0b384f95f72 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Wed, 18 Jul 2018 18:01:18 +0300
Subject: [PATCH 15/18] correct naming/nesting

---
 .../VuesticSimpleSelect.vue                   | 85 ++++++++++---------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 4caf67168..50769b734 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -1,49 +1,49 @@
 <template>
-  <div
-    class="form-group with-icon-right dropdown select-form-group"
-    v-dropdown.isBlocked
-    :class="{'has-error': hasErrors()}">
-    <div class="input-group dropdown-toggle">
-      <div>
-        <input
-          @focus="showDropdown()"
-          :class="{'has-value': !!value}"
-          v-model="displayValue"
-          :name="name"
-          @blur="closeDropdown()"
-          :options="options"
-          :placeholder="placeholder">
-        <label class="control-label">{{label}}</label><i class="bar"/>
-        <small v-show="hasErrors()" class="help text-danger">
-          {{ showRequiredError() }}
-        </small>
-      </div>
-      <div>
+  <div class="vuestic-simple-select">
+    <div
+      class="form-group with-icon-right dropdown select-form-group"
+      v-dropdown.isBlocked
+      :class="{'has-error': hasErrors()}">
+      <div class="input-group dropdown-toggle vuestic-simple-select__dropdown-toggle">
+        <div>
+          <input
+            @focus="showDropdown()"
+            :class="{'has-value': !!value}"
+            v-model="displayValue"
+            :name="name"
+            @blur="closeDropdown()"
+            :options="options"
+            :placeholder="placeholder">
+          <label class="control-label">{{label}}</label><i class="bar"/>
+          <small v-show="hasErrors()" class="help text-danger">
+            {{ showRequiredError() }}
+          </small>
+        </div>
         <i
-          class="ion ion-ios-arrow-down icon-right input-icon dropdown-ion"
+          class="ion ion-ios-arrow-down icon-right input-icon vuestic-simple-select__dropdown-arrow"
           @click="showDropdown"
         />
       </div>
-    </div>
-    <div v-if="isClearable">
-      <i
-        class="fa fa-close icon-cross icon-right input-icon select-form-group__unselect"
-        @click="unselectOption"
-      />
-    </div>
-    <div
-      class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-      <scrollbar ref="scrollbar">
-        <div class="dropdown-menu-content">
-          <div class="dropdown-item"
-               v-for="option in filteredList"
-               :class="{'selected': isOptionSelected(option)}"
-               @mousedown="toggleSelection(option)">
+      <div v-if="isClearable">
+        <i
+          class="fa fa-close icon-cross icon-right input-icon vuestic-simple-select__unselect"
+          @click="unselectOption"
+        />
+      </div>
+      <div
+        class="dropdown-menu vuestic-simple-select__dropdown-menu" aria-labelledby="dropdownMenuButton">
+        <scrollbar ref="scrollbar">
+          <div class="dropdown-menu-content vuestic-simple-select__dropdown-menu-content">
+            <div class="dropdown-item vuestic-simple-select__dropdown-item"
+                 v-for="option in filteredList"
+                 :class="{'selected': isOptionSelected(option)}"
+                 @mousedown="toggleSelection(option)">
             <span
               class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
+            </div>
           </div>
-        </div>
-      </scrollbar>
+        </scrollbar>
+      </div>
     </div>
   </div>
 </template>
@@ -179,19 +179,20 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.select-form-group {
+<style lang="scss">
+.vuestic-simple-select {
+
   &__unselect {
     margin-right: 20px;
     cursor: pointer;
   }
 
-  .dropdown-ion {
+  .vuestic-simple-select__dropdown-arrow.vuestic-simple-select__dropdown-arrow {
     top: 12px;
     cursor: pointer;
   }
 
-  .dropdown-menu {
+  &__dropdown-menu {
     padding: 0;
     .vuestic-scrollbar {
       height: $dropdown-item-height * 4;

From 4841105fff9a1e8b4e8ecb4343f12d7eec11274f Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Thu, 19 Jul 2018 19:54:44 +0300
Subject: [PATCH 16/18] fixed multi-select

---
 .../vuestic-multi-select/VuesticMultiSelect.vue                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
index 369923f61..dd41e238b 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
@@ -23,7 +23,7 @@
         <div class="dropdown-menu-content">
           <div class="dropdown-item"
                :class="{'selected': isOptionSelected(option)}" v-for="option in options"
-               @click="toggleSelection(option)">
+               @mousedown="toggleSelection(option)">
             <span class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
             <i class="fa fa-check selected-icon"></i>
           </div>

From c9abf204971f7f286ce13f86203f195218df1ab2 Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Thu, 19 Jul 2018 21:13:58 +0300
Subject: [PATCH 17/18] no placeholder

---
 .../vuestic-multi-select/VuesticMultiSelect.vue          | 2 +-
 .../vuestic-simple-select/VuesticSimpleSelect.vue        | 9 ++-------
 src/vuestic-theme/vuestic-directives/Dropdown.js         | 2 +-
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
index dd41e238b..369923f61 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue
@@ -23,7 +23,7 @@
         <div class="dropdown-menu-content">
           <div class="dropdown-item"
                :class="{'selected': isOptionSelected(option)}" v-for="option in options"
-               @mousedown="toggleSelection(option)">
+               @click="toggleSelection(option)">
             <span class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
             <i class="fa fa-check selected-icon"></i>
           </div>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 50769b734..1e1b88200 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -11,9 +11,7 @@
             :class="{'has-value': !!value}"
             v-model="displayValue"
             :name="name"
-            @blur="closeDropdown()"
-            :options="options"
-            :placeholder="placeholder">
+            :options="options">
           <label class="control-label">{{label}}</label><i class="bar"/>
           <small v-show="hasErrors()" class="help text-danger">
             {{ showRequiredError() }}
@@ -37,7 +35,7 @@
             <div class="dropdown-item vuestic-simple-select__dropdown-item"
                  v-for="option in filteredList"
                  :class="{'selected': isOptionSelected(option)}"
-                 @mousedown="toggleSelection(option)">
+                 @click="toggleSelection(option)">
             <span
               class="ellipsis">{{optionKey ? option[optionKey] : option}}</span>
             </div>
@@ -140,9 +138,6 @@ export default {
     showDropdown () {
       this.displayValue = ''
     },
-    closeDropdown () {
-      this.displayValue = this.selectedValue
-    },
     isOptionSelected (option) {
       if (this.optionKey) {
         return this.selectedValue === option[this.optionKey]
diff --git a/src/vuestic-theme/vuestic-directives/Dropdown.js b/src/vuestic-theme/vuestic-directives/Dropdown.js
index 6e6a42085..739fe114e 100644
--- a/src/vuestic-theme/vuestic-directives/Dropdown.js
+++ b/src/vuestic-theme/vuestic-directives/Dropdown.js
@@ -49,7 +49,7 @@ export default {
     }
 
     if (dropdownItem) {
-      dropdownItem.addEventListener('mousedown', () => {
+      dropdownItem.addEventListener('click', () => {
         if (dropdownIon) {
           if (dropdownIon.classList.contains('ion-ios-arrow-up')) {
             dropdownIon.classList.remove('ion-ios-arrow-up')

From 9b40bedc990037acbf087e73e07b820bb5591a0a Mon Sep 17 00:00:00 2001
From: Vlad Shusterman <vlad.shusterman30@gmail.com>
Date: Thu, 19 Jul 2018 21:36:05 +0300
Subject: [PATCH 18/18]  case insensitive search

---
 .../vuestic-simple-select/VuesticSimpleSelect.vue           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
index 1e1b88200..9dce58075 100755
--- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
+++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -109,9 +109,11 @@ export default {
       } else {
         return this.options.filter(function (item) {
           if (optionKey && item[optionKey]) {
-            return item[optionKey].search(displayValue) === 0
+            if (displayValue) {
+              return item[optionKey].toLowerCase().search(displayValue.toLowerCase()) === 0
+            }
           } else {
-            return item.search(displayValue) === 0
+            return item.toLowerCase().search(displayValue.toLowerCase()) === 0
           }
         })
       }