feat(select): invalid v-model with is-multi prop now returns all options (#215)

TotomInc · web-flow · commit 996c644266bd · 2025-03-20T13:23:07.000+01:00
* feat(select): invalid v-model with is-multi prop now returns all options * feat(select): automatically convert v-model to array when undefined with is-multi #212 * chore: release v0.11.6-beta.1 * fix(select): use getOptionValue to determine selected options when using isMulti prop #212 (comment) * chore: release v0.11.6-beta.2
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-select-component",
   "type": "module",
-  "version": "0.11.5",
+  "version": "0.11.6-beta.2",
   "description": "A flexible & modern select-input control for Vue 3.",
   "author": "Thomas Cazade <cazade.thomas@gmail.com>",
   "license": "MIT",
diff --git a/src/Select.vue b/src/Select.vue
@@ -44,10 +44,7 @@ const emit = defineEmits<{
   (e: "search", value: string): void;
 }>();
 
-const selected = defineModel<OptionValue | OptionValue[]>({
-  required: true,
-  validator: (value, _props) => _props.isMulti ? Array.isArray(value) : !Array.isArray(value),
-});
+const selected = defineModel<OptionValue | OptionValue[]>({ required: true });
 
 const containerRef = useTemplateRef("container");
 const inputRef = useTemplateRef("input");
@@ -72,8 +69,9 @@ const availableOptions = computed<GenericOption[]>(() => {
   }));
 
   // Remove already selected values from the list of options, when in multi-select mode.
+  // In case an invalid v-model is provided, we return all options since we can't know what options are valid.
   const getNonSelectedOptions = (options: GenericOption[]) => options.filter(
-    (option) => Array.isArray(selected.value) && !selected.value.includes(option.value),
+    (option) => Array.isArray(selected.value) ? !selected.value.includes(option.value) : true,
   );
 
   if (props.isSearchable && search.value) {
@@ -85,7 +83,7 @@ const availableOptions = computed<GenericOption[]>(() => {
   return props.isMulti ? getNonSelectedOptions(options) : options;
 });
 
-const selectedOptions = computed(() => {
+const selectedOptions = computed<GenericOption[]>(() => {
   if (props.isMulti) {
     if (!Array.isArray(selected.value)) {
       if (!props.disableInvalidVModelWarn) {
@@ -95,9 +93,9 @@ const selectedOptions = computed(() => {
       return [];
     }
 
-    return selected.value.map(
-      (value) => props.options.find((option) => option.value === value)!,
-    );
+    return selected.value
+      .map((selectedValue) => props.options.find((option) => props.getOptionValue(option) === selectedValue))
+      .filter((option) => option !== undefined);
   }
 
   const found = props.options.find((option) => props.getOptionValue(option) === selected.value);
@@ -153,8 +151,12 @@ const setOption = (option: GenericOption) => {
     if (Array.isArray(selected.value)) {
       selected.value.push(option.value);
     }
-    else 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}`);
+    else {
+      selected.value = [option.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}. Since an option has been selected, the component automatically converted the v-model to an array.`);
+      }
     }
   }
   else {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue3-select-component",`
`3`	`3`	`"type": "module",`
`4`		`- "version": "0.11.5",`
	`4`	`+ "version": "0.11.6-beta.2",`
`5`	`5`	`"description": "A flexible & modern select-input control for Vue 3.",`
`6`	`6`	`"author": "Thomas Cazade <cazade.thomas@gmail.com>",`
`7`	`7`	`"license": "MIT",`