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 &&

src/main.js

@@ -1,11 +1,12 @@
-import { createApp } from "vue";
-import "./assets/css/index.css";
-import App from "./App.vue";
-import { createPinia } from "pinia";
-import PrimeVue from "primevue/config";
-import ToastService from "primevue/toastservice";
-import Select from "primevue/select";
-import { router } from "./router/router.js";
+import { createApp } from 'vue';
+import './assets/css/index.css';
+import App from './App.vue';
+import { createPinia } from 'pinia';
+import PrimeVue from 'primevue/config';
+import ToastService from 'primevue/toastservice';
+import Select from 'primevue/select';
+import MultiSelect from 'primevue/multiselect';
+import { router } from './router/router.js';
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -16,5 +17,6 @@ app.use(PrimeVue, {
 });
 app.use(ToastService);
 app.use(router);
-app.component("Select", Select);
-app.mount("#app");
+app.component('Select', Select);
+app.component('MultiSelect', MultiSelect);
+app.mount('#app');