fix(select): option key misbehaved

fix epicmaxco#413
jayaruvan · Dec 17, 2018 · 23e8b7c · 23e8b7c
1 parent d7deccd
commit 23e8b7c
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 20 deletions.
diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect-413.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect-413.demo.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="demo-container">
+    <div class="demo-container__item" style="width: 500px;">
+      <vuestic-simple-select
+        label="Position"
+        v-model="value"
+        option-key="description"
+        :options="imagePositions"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+// Fixes https://github.com/epicmaxco/vuestic-admin/issues/413
+
+import VuesticSimpleSelect from './VuesticSimpleSelect'
+
+export default {
+  name: 'my-component',
+  components: { VuesticSimpleSelect },
+  data: () => {
+    return {
+      value: null,
+      imagePositions: [
+        {
+          id: '1',
+          description: '1',
+        },
+        {
+          id: '2',
+          description: '2',
+        },
+      ],
+    }
+  },
+}
+</script>
diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue
@@ -90,20 +90,20 @@ export default {
   data () {
     return {
       validated: false,
-      displayValue: this.value,
+      displayValue: this.value || '',
       selectedValue: this.value,
     }
   },
   watch: {
     value: {
       handler (value) {
-        if (this.optionKey) {
-          this.selectedValue = value[this.optionKey]
-          this.displayValue = value[this.optionKey]
-        } else {
+        if (!value || !this.optionKey) {
           this.displayValue = value || ''
           this.selectedValue = value || ''
+          return
         }
+        this.selectedValue = value[this.optionKey]
+        this.displayValue = value[this.optionKey]
       },
       immediate: true,
     },
@@ -115,14 +115,18 @@ export default {
       if (displayValue === '') {
         return this.options
       } else {
+        // HACK This is done poorly.
         return this.options.filter(function (item) {
-          if (optionKey && item[optionKey]) {
+          if (optionKey && item && item[optionKey]) {
+            // option is object
             if (displayValue) {
               return item[optionKey].toLowerCase()
                 .search(displayValue.toLowerCase()) === 0
             }
           } else {
-            return item.toLowerCase().search(displayValue.toLowerCase()) === 0
+            // option is string
+            return (item + '').toLowerCase()
+              .search(displayValue.toLowerCase()) === 0
           }
         })
       }
@@ -140,7 +144,7 @@ export default {
   },
   methods: {
     onDropdownClose () {
-      this.displayValue = this.value
+      this.displayValue = this.value || ''
     },
     toggleSelection (option) {
       this.isOptionSelected(option) ? this.unselectOption() : this.selectOption(option)
@@ -160,9 +164,14 @@ export default {
       }
     },
     selectOption (option) {
-      this.displayValue = option
-      this.selectedValue = this.displayValue
-      this.$emit('input', this.selectedValue)
+      if (!option) {
+        this.displayValue = ''
+      }
+      if (option && this.optionKey) {
+        this.displayValue = option[this.optionKey]
+      }
+      this.selectedValue = option
+      this.$emit('input', option)
     },
     validate () {
       this.validated = true
@@ -203,6 +212,7 @@ export default {
 
   &__dropdown-menu {
     padding: 0;
+
     .vuestic-scrollbar {
       max-height: $dropdown-item-height * 4;
     }

diff --git a/yarn.lock b/yarn.lock
@@ -2708,11 +2708,10 @@ entities@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
 
-epic-spinners@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/epic-spinners/-/epic-spinners-1.0.3.tgz#f8ec3c59a4132de74acfe4edc0a8e1ce8b0c8312"
-  dependencies:
-    vue "2.5.16"
+epic-spinners@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/epic-spinners/-/epic-spinners-1.0.4.tgz#6372b4a7748eb7cad562e8b516cc7505d26fb5b3"
+  integrity sha512-oCcAN0/GrAlERMYBaMpjEQCfaqUyyAGZnHv8jad9W2EwKrxeGCRp4sjKezGB/m+quJ8ZWGNQZKHiCAA1GSUWJw==
 
 errno@^0.1.3, errno@~0.1.7:
   version "0.1.7"
@@ -7930,10 +7929,6 @@ vue2-circle-progress@^1.0.3:
     jquery-easing "0.0.1"
     vue "^2.0.0"
 
-[email protected]:
-  version "2.5.16"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
-
 vue@^2.0.0, vue@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"