From 8321bd38dbcf03e25e7e14b9556d307f17f2eb96 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Sat, 3 Feb 2024 17:14:45 +0100
Subject: [PATCH] fix: multi  select width  bug (#303)

* fix: multi  select width  bug

* style: truncate multi-select values text

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/SelectInput.vue        | 13 ++++++++-----
 client/components/forms/components/VSelect.vue |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/client/components/forms/SelectInput.vue b/client/components/forms/SelectInput.vue
index 521f83e..e5cf34a 100644
--- a/client/components/forms/SelectInput.vue
+++ b/client/components/forms/SelectInput.vue
@@ -5,7 +5,6 @@
     <template #label>
       <slot name="label" />
     </template>
-
     <v-select v-model="compVal"
               :data="finalOptions"
               :label="label"
@@ -26,14 +25,14 @@
               :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 v-for="(item,index) in option" :key="item" class="truncate">
-                <span v-if="index!==0">, </span>
-                {{ getOptionName(item) }}
+              <span class="truncate">
+                {{ selectedValues.join(', ') }}
               </span>
             </div>
           </template>
@@ -104,7 +103,8 @@ export default {
 
   data () {
     return {
-      additionalOptions: []
+      additionalOptions: [],
+      selectedValues:[],
     }
   },
 
@@ -121,6 +121,9 @@ export default {
       if (option) return option[this.displayKey]
       return null
     },
+    updateModelValue(newValues){
+      this.selectedValues = newValues
+    },
     updateOptions (newItem) {
       if (newItem) {
         this.additionalOptions.push(newItem)
diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index 10c6a39..96a96ca 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="v-select relative" ref="select">
+  <div class="v-select relative" :class="[{'w-0': multiple, 'min-w-full':multiple}]" ref="select">
     <span class="inline-block w-full rounded-md">
       <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
               class="cursor-pointer"