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"
-              :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>
@@ -53,8 +34,7 @@
               <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"
-                      clip-rule="evenodd"
+                  clip-rule="evenodd" />
-                />
               </svg>
             </span>
           </span>
@@ -121,6 +101,11 @@ export default {
       if (option) return option[this.displayKey]
       return null
     },
+    getOptionNames(values) {
+      return values.map(val => {
+        return this.getOptionName(val)
+      })
+    },
     updateModelValue(newValues) {
       if (newValues === null) newValues = []
       this.selectedValues = newValues