diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts index 9e5955aec..04db029fd 100644 --- a/packages/vee-validate/src/useField.ts +++ b/packages/vee-validate/src/useField.ts @@ -486,8 +486,11 @@ export function useFieldValue( return ref(unref(initialValue)) as WritableRef; } - // set initial value - form.stageInitialValue(unref(path), unref(initialValue)); + // to set the initial value, first check if there is a current value, if there is then use it. + // otherwise use the configured initial value if it exists. + // #3429 + const currentValue = getFromPath(form.values, unref(path), unref(initialValue)); + form.stageInitialValue(unref(path), currentValue === undefined ? unref(initialValue) : currentValue); // otherwise use a computed setter that triggers the `setFieldValue` const value = computed({ get() { diff --git a/packages/vee-validate/tests/Form.spec.ts b/packages/vee-validate/tests/Form.spec.ts index 4a9e38fd6..0bddb179e 100644 --- a/packages/vee-validate/tests/Form.spec.ts +++ b/packages/vee-validate/tests/Form.spec.ts @@ -2205,4 +2205,32 @@ describe('
', () => { expect(value.value).toBe(undefined); }); + + // #3429 + test('Two fields of the same name should not override each other value when either is mounted', async () => { + const isHidden = ref(false); + const value = ref(''); + mountWithHoc({ + setup() { + return { + value, + isHidden, + }; + }, + template: ` + + + + + `, + }); + + await flushPromises(); + const input = document.querySelector('input') as HTMLInputElement; + setValue(input, '1234'); + await flushPromises(); + isHidden.value = true; + await flushPromises(); + expect(input.value).toBe(value.value); + }); });