mutiselect inputs loading

src/components/Selector.vue

@@ -8,13 +8,15 @@
 
     <MultiSelect
       v-if="isCompareModeEnabled"
+      id="selector-multiselect"
       v-model="currentValue"
       :options="items"
       optionLabel="title"
-      filter
       placeholder="Select Cities"
       :maxSelectedLabels="3"
-      class="w-full md:w-80"
+      class="font-serif"
+      data-icon="chevron-single-down"
+      checkmark
     />
 
     <Select
@@ -28,7 +30,7 @@
       checkmark
     >
       <template #value="slotProps">
-        <p v-if="currentValue && !Array.isArray(currentValue)">
+        <p v-if="currentValue">
           {{ currentValue.title }}
         </p>
         <p v-else>Selectionnez</p>
@@ -63,10 +65,18 @@ const { items, label, isCompareModeEnabled } = defineProps({
 
 const emit = defineEmits(['update:selectedItems']);
 
-const currentValue = ref(isCompareModeEnabled ? [] : null);
+const currentValue = ref(null);
 
 const { activeTracks } = storeToRefs(useDialogStore());
 
+watch(
+  () => isCompareModeEnabled,
+  (newValue) => {
+    if (newValue)
+      currentValue.value = currentValue.value ? [currentValue.value] : [];
+  }
+);
+
 watch(currentValue, (newValue) => {
   if (
     newValue !== null &&