fix: array type inputs not always emitting

Author: vis97c

packages/components-vue/src/components/form/Input.vue

@@ -109,9 +109,7 @@
 						:invalid="invalid"
 						:model-value="[model]"
 						:disabled="readonly"
-						@update:model-value="
-							models[i].value = models[i].value.toSpliced(index, 1, $event[0])
-						"
+						@update:model-value="updateArrModel(i, index, $event[0])"
 					/>
 				</div>
 				<FormInputNValues
@@ -120,24 +118,26 @@
 					:values="[2]"
 				>
 					<InputText
-						v-model="models[i].value[0]"
+						:model-value="models[i].value[0]"
 						v-bind="inputProps"
 						:invalid="isInvalidByValidation"
 						:theme="theme"
 						:disabled="readonly"
 						:placeholder="getInputPlaceholder()"
 						type="password"
 						class="--width-180:md --flx"
+						@update:model-value="updateArrModel(i, 0, $event)"
 					/>
 					<InputText
-						v-model="models[i].value[1]"
+						:model-value="models[i].value[1]"
 						v-bind="inputProps"
 						:invalid="isInvalidByValidation"
 						:theme="theme"
 						:disabled="readonly"
 						:placeholder="getInputPlaceholder(1)"
 						type="password"
 						class="--width-180:md --flx"
+						@update:model-value="updateArrModel(i, 1, $event)"
 					/>
 				</FormInputNValues>
 				<FormInputNValues
@@ -168,21 +168,23 @@
 					:values="[2]"
 				>
 					<SelectSimple
-						v-model="models[i].value[0]"
+						:model-value="models[i].value[0]"
 						:theme="theme"
 						:disabled="readonly"
 						:options="indicativesArr"
 						class="--width-180:md --flx"
+						@update:model-value="updateArrModel(i, 0, $event)"
 					/>
 					<InputText
-						v-model="models[i].value[1]"
+						:model-value="models[i].value[1]"
 						v-bind="inputProps"
 						:invalid="isInvalidByValidation"
 						:theme="theme"
 						:disabled="readonly"
 						:placeholder="getInputPlaceholder()"
 						type="tel"
 						class="--width-180:md --flx"
+						@update:model-value="updateArrModel(i, 1, $event)"
 					/>
 				</FormInputNValues>
 				<FormInputCountriesAPI
@@ -191,11 +193,10 @@
 					:states="states"
 					:theme="theme"
 					:model="models[i].value"
-					:values="[1, 3]"
 				>
 					<SelectFilter
 						v-if="!defaultCountry || models[i].value.length === 1"
-						v-model="models[i].value[0]"
+						:model-value="models[i].value[0]"
 						:options="countriesArr"
 						name="country"
 						:value="defaultCountry"
@@ -204,30 +205,33 @@
 						:disabled="readonly"
 						:placeholder="getInputPlaceholder()"
 						class="--width-180:md --flx"
+						@update:model-value="updateArrModel(i, 0, $event)"
 					/>
 					<div
 						v-if="models[i].value.length === 3"
 						class="flx --flxColumn --flxRow-wrap:md --flx-start-stretch --gap-5 --flx"
 					>
 						<SelectFilter
-							v-model="models[i].value[1]"
+							:model-value="models[i].value[1]"
 							:options="statesArr || statesReq?.content?.map(stateToOption)"
 							name="state"
 							icon="mountain-sun"
 							:theme="theme"
 							:disabled="readonly || !(models[i].value[0] || defaultCountry)"
 							:placeholder="getInputPlaceholder(1)"
 							class="--width-180:md --flx"
+							@update:model-value="updateArrModel(i, 1, $event)"
 						/>
 						<SelectFilter
-							v-model="models[i].value[2]"
+							:model-value="models[i].value[2]"
 							:options="citiesReq.content.map(cityToOption)"
 							name="city"
 							icon="city"
 							:theme="theme"
 							:disabled="readonly || !models[i].value[1]"
 							:placeholder="getInputPlaceholder(2)"
 							class="--width-180:md --flx"
+							@update:model-value="updateArrModel(i, 2, $event)"
 						/>
 					</div>
 				</FormInputCountriesAPI>
@@ -432,6 +436,12 @@
 		);
 	});
 
+	function updateArrModel(modelIndex: number, valuePosition: number, newValue: any) {
+		const model: any[] = models.value[modelIndex].value;
+
+		models.value[modelIndex].value = model.toSpliced(valuePosition, 1, newValue);
+	}
+
 	function choose(value: string | number) {
 		if (props.input.multiple) {
 			if (props.modelValue.includes(value)) {

packages/components-vue/src/components/form/Stages.vue

@@ -121,7 +121,7 @@
 								:aria-label="t('clear')"
 								:theme="theme"
 								:disabled="!canSubmit"
-								@click="fullReset"
+								@click="resetStages"
 							>
 								<IconFa name="broom" :size="20" />
 							</ActionLink>
@@ -232,7 +232,7 @@
 			emit("submited", successOrInvalid);
 
 			if (successOrInvalid) {
-				resetStages(props.stages); // reset form
+				resetStages(); // reset form
 				props.successFn?.();
 			}
 		}
@@ -244,7 +244,7 @@
 	function getValues(inputs: FormInputClass[]): Record<string, unknown[]> {
 		return inputs.reduce((acc, input) => ({ ...acc, [input.name]: input.values }), {});
 	}
-	function resetStages(newStages: iForm[][]) {
+	function setStages(newStages: iForm[][]) {
 		loading.value = true;
 
 		// reset
@@ -284,15 +284,15 @@
 		loading.value = false;
 	}
 
-	function fullReset() {
+	function resetStages() {
 		const wasListened = lastListened.value;
 
 		loading.value = true;
 		lastListened.value = undefined;
 
 		if (wasListened) emit("input-values", {}, true);
 
-		resetStages(props.stages);
+		setStages(props.stages);
 		canSubmit.value = !!props.optional;
 		activeStage.value = 0;
 	}
@@ -317,9 +317,9 @@
 
 	watch(
 		() => props.stages,
-		(newStages) => resetStages(newStages),
+		(newStages) => setStages(newStages),
 		{ immediate: true }
 	);
 
-	onBeforeUnmount(fullReset);
+	onBeforeUnmount(resetStages);
 </script>

packages/components-vue/src/components/select/Filter.vue

@@ -35,8 +35,9 @@
 		<InputText
 			v-model="aliasModel"
 			:list="selectFilterName"
+			autocomplete="off"
 			v-bind="{
-				..._.omit(props, 'modelValue'),
+				..._.omit(props, ['modelValue', 'autocomplete']),
 				type: 'text',
 				placeholder: t('select_filter_options'),
 				disabled: (!!modelValue && !isInvalid) || disabled,