fix(select): isMulti with non-array v-model should return empty array in selectedOptions (#213)

TotomInc · web-flow · commit b9f02f11e3fe · 2025-02-25T14:14:48.000+01:00
* fix(select): isMulti with non-array v-model should return empty array in selectedOptions Fixes #212 * feat(select): add disableInvalidVModelWarn prop
diff --git a/docs/props.md b/docs/props.md
@@ -203,6 +203,14 @@ A unique identifier to be passed to the select control. Will be used on multiple
 
 Aria attributes to be passed to the select control to improve accessibility.
 
+## disableInvalidVModelWarn
+
+**Type**: `boolean`
+
+**Default**: `false`
+
+When set to true, the component will not emit a `console.warn` because of an invalid `v-model` type when using `isMulti`. This is useful when using the component with dynamic `v-model` references.
+
 ## filterBy
 
 **Type**:
diff --git a/src/Select.vue b/src/Select.vue
@@ -28,6 +28,7 @@ const props = withDefaults(
     inputId: undefined,
     uid: uniqueId(),
     aria: undefined,
+    disableInvalidVModelWarn: false,
     filterBy: (option: GenericOption, label: string, search: string) => label.toLowerCase().includes(search.toLowerCase()),
     getOptionValue: (option: GenericOption) => option.value,
     getOptionLabel: (option: GenericOption) => option.label,
@@ -87,10 +88,14 @@ const availableOptions = computed<GenericOption[]>(() => {
 const selectedOptions = computed(() => {
   if (props.isMulti) {
     if (!Array.isArray(selected.value)) {
-      console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${selected.value}`);
+      if (!props.disableInvalidVModelWarn) {
+        console.warn(`[vue3-select-component warn]: The v-model provided should be an array when using \`isMulti\` prop, instead it was: ${selected.value}`);
+      }
+
+      return [];
     }
 
-    return (selected.value as OptionValue[]).map(
+    return selected.value.map(
       (value) => props.options.find((option) => option.value === value)!,
     );
   }
diff --git a/src/types.ts b/src/types.ts
@@ -102,6 +102,13 @@ export type Props<GenericOption, OptionValue> = {
     required?: boolean;
   };
 
+  /**
+   * When set to true, the component will not emit a `console.warn` because of an invalid
+   * `v-model` type when using `isMulti`. This is useful when using the component with
+   * dynamic `v-model` references.
+   */
+  disableInvalidVModelWarn?: boolean;
+
   /**
    * Callback to filter the options based on the search input. By default, it filters
    * the options based on the `label` property of the option. The label is retrieved
