diff --git a/packages/vant/src/field/Field.tsx b/packages/vant/src/field/Field.tsx index 4a52e916f08..109dae949b4 100644 --- a/packages/vant/src/field/Field.tsx +++ b/packages/vant/src/field/Field.tsx @@ -686,6 +686,13 @@ export default defineComponent({ }, ); + watch(inputRef, (newVal) => { + if (newVal) { + updateValue(getModelValue(), props.formatTrigger); + nextTick(adjustTextareaSize); + } + }); + onMounted(() => { updateValue(getModelValue(), props.formatTrigger); nextTick(adjustTextareaSize); diff --git a/packages/vant/src/field/test/index.spec.js b/packages/vant/src/field/test/index.spec.js index a1be9ffcfbe..e92fca3d9ba 100644 --- a/packages/vant/src/field/test/index.spec.js +++ b/packages/vant/src/field/test/index.spec.js @@ -1,5 +1,6 @@ import { Field } from '..'; import { mount, later } from '../../../test'; +import { ref, nextTick } from 'vue'; test('should emit "update:modelValue" event when after inputting', () => { const wrapper = mount(Field); @@ -663,3 +664,33 @@ test('should limit maxlength correctly when pasting multiple emojis', async () = expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('1😀😀😀'); expect(input.element.value).toEqual('1😀😀😀'); }); + +test('should render correct value when input slot is removed dynamically', async () => { + const Wrapper = { + template: ` + + + + `, + components: { Field }, + setup() { + const value = ref('foo'); + const showSlot = ref(true); + return { value, showSlot }; + }, + }; + + const wrapper = mount(Wrapper); + + expect(wrapper.find('.custom-input').exists()).toBeTruthy(); + expect(wrapper.find('input').exists()).toBeFalsy(); + + wrapper.vm.showSlot = false; + await nextTick(); + + const input = wrapper.find('input'); + expect(input.exists()).toBeTruthy(); + expect(input.element.value).toEqual('foo'); +});