fix multi select input (#352)

client/components/forms/SelectInput.vue

@@ -1,38 +1,19 @@
 <template>
-  <input-wrapper
+  <input-wrapper v-bind="inputWrapperProps">
-    v-bind="inputWrapperProps"
-  >
     <template #label>
       <slot name="label" />
     </template>
-    <v-select v-model="compVal"
+    <v-select v-model="compVal" :data="finalOptions" :label="label" :option-key="optionKey" :emit-key="emitKey"
-              :data="finalOptions"
+      :required="required" :multiple="multiple" :searchable="searchable" :loading="loading" :color="color"
-              :label="label"
+      :placeholder="placeholder" :uppercase-labels="uppercaseLabels" :theme="theme" :has-error="hasError"
-              :option-key="optionKey"
+      :allow-creation="allowCreation" :disabled="disabled ? true : null" :help="help" :help-position="helpPosition"
-              :emit-key="emitKey"
+      @update-options="updateOptions" @update:model-value="updateModelValue">
-              :required="required"
+      <template #selected="{ option }">
-              :multiple="multiple"
-              :searchable="searchable"
-              :loading="loading"
-              :color="color"
-              :placeholder="placeholder"
-              :uppercase-labels="uppercaseLabels"
-              :theme="theme"
-              :has-error="hasError"
-              :allow-creation="allowCreation"
-              :disabled="disabled?true:null"
-              :help="help"
-              :help-position="helpPosition"
-
-              @update-options="updateOptions"
-              @update:model-value="updateModelValue"
-    >
-      <template #selected="{option}">
         <slot name="selected" :option="option" :optionName="getOptionName(option)">
           <template v-if="multiple">
             <div class="flex items-center truncate mr-6">
               <span class="truncate">
-                {{ selectedValues?.join(', ') }}
+                {{ getOptionNames(selectedValues).join(', ') }}
               </span>
             </div>
           </template>
@@ -43,7 +24,7 @@
           </template>
         </slot>
       </template>
-      <template #option="{option, selected}">
+      <template #option="{ option, selected }">
         <slot name="option" :option="option" :selected="selected">
           <span class="flex group-hover:text-white">
             <p class="flex-grow group-hover:text-white">
@@ -52,9 +33,8 @@
             <span v-if="selected" class="absolute inset-y-0 right-0 flex items-center pr-4 dark:text-white">
               <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                 <path fill-rule="evenodd"
-                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                      clip-rule="evenodd"
+                  clip-rule="evenodd" />
-                />
               </svg>
             </span>
           </span>
@@ -95,37 +75,42 @@ export default {
     allowCreation: { type: Boolean, default: false }
   },
 
-  setup (props, context) {
+  setup(props, context) {
     return {
       ...useFormInput(props, context)
     }
   },
 
-  data () {
+  data() {
     return {
       additionalOptions: [],
-      selectedValues:[],
+      selectedValues: [],
     }
   },
 
   computed: {
-    finalOptions () {
+    finalOptions() {
       return this.options.concat(this.additionalOptions)
     }
   },
   methods: {
-    getOptionName (val) {
+    getOptionName(val) {
       const option = this.finalOptions.find((optionCandidate) => {
         return optionCandidate[this.optionKey] === val
       })
       if (option) return option[this.displayKey]
       return null
     },
-    updateModelValue(newValues){
+    getOptionNames(values) {
+      return values.map(val => {
+        return this.getOptionName(val)
+      })
+    },
+    updateModelValue(newValues) {
       if (newValues === null) newValues = []
       this.selectedValues = newValues
     },
-    updateOptions (newItem) {
+    updateOptions(newItem) {
       if (newItem) {
         this.additionalOptions.push(newItem)
       }