diff --git a/package-lock.json b/package-lock.json index 08ab700..4f532e6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue3-select-component", - "version": "0.11.5", + "version": "0.11.6-beta.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "vue3-select-component", - "version": "0.11.5", + "version": "0.11.6-beta.2", "license": "MIT", "devDependencies": { "@antfu/eslint-config": "4.10.1", diff --git a/package.json b/package.json index f649fb9..9c64fff 100644 --- 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 ", "license": "MIT", diff --git a/src/Select.vue b/src/Select.vue index 6545b46..389733c 100644 --- a/src/Select.vue +++ b/src/Select.vue @@ -44,10 +44,7 @@ const emit = defineEmits<{ (e: "search", value: string): void; }>(); -const selected = defineModel({ - required: true, - validator: (value, _props) => _props.isMulti ? Array.isArray(value) : !Array.isArray(value), -}); +const selected = defineModel({ required: true }); const containerRef = useTemplateRef("container"); const inputRef = useTemplateRef("input"); @@ -72,8 +69,9 @@ const availableOptions = computed(() => { })); // 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(() => { return props.isMulti ? getNonSelectedOptions(options) : options; }); -const selectedOptions = computed(() => { +const selectedOptions = computed(() => { 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 {