fix: input controlled

components/_util/BaseInput.tsx

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { computed, defineComponent, shallowRef, ref, watch } from 'vue';
+import { computed, defineComponent, shallowRef, ref, watch, nextTick } from 'vue';
 import PropTypes from './vue-types';
 import type { BaseInputInnerExpose } from './BaseInputInner';
 import BaseInputInner from './BaseInputInner';
@@ -78,11 +78,21 @@ const BaseInput = defineComponent({
       handleChange(e);
     };
     const handleInput = (e: Event) => {
+      const el = e.target as HTMLInputElement;
+
       if (isComposing.value && props.lazy) {
-        renderValue.value = (e.target as HTMLInputElement).value;
+        renderValue.value = el.value;
         return;
       }
       emit('input', e);
+
+      // ensure that the native inputs are controlled
+      // see: https://github.com/vueComponent/ant-design-vue/issues/7720
+      nextTick(() => {
+        if (props.value !== undefined && el.value !== props.value) {
+          el.value = props.value;
+        }
+      });
     };
 
     const handleBlur = (e: Event) => {

components/input/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { asyncExpect } from '../../../tests/utils';
+import { asyncExpect, sleep } from '../../../tests/utils';
 import Input from '..';
 // import Form from '../../form';
 import focusTest from '../../../tests/shared/focusTest';
@@ -189,4 +189,50 @@ describe('Input.Password', () => {
 
     expect(cbMock).toHaveBeenCalledWith(false);
   });
+
+  it('input controlled when value is valid', async () => {
+    const wrapper = mount(Input, { props: { value: 'hello' }, sync: false });
+    await asyncExpect(() => {
+      jest.useFakeTimers();
+
+      const input = wrapper.find('.ant-input');
+      expect(input.element.value).toBe('hello');
+
+      input.setValue('changed');
+      input.trigger('input', { value: 'changed' });
+
+      const timer = sleep(100);
+      jest.runAllTimers();
+
+      timer.then(() => {
+        expect(input.element.value).toBe('hello');
+
+        jest.useRealTimers();
+        wrapper.unmount();
+      });
+    }, 0);
+  });
+
+  it('input no controlled when value is undefined', async () => {
+    const wrapper = mount(Input, { props: { value: undefined }, sync: false });
+    await asyncExpect(() => {
+      jest.useFakeTimers();
+
+      const input = wrapper.find('.ant-input');
+      expect(input.element.value).toBe('');
+
+      input.setValue('changed');
+      input.trigger('input', { value: 'changed' });
+
+      const timer = sleep(100);
+      jest.runAllTimers();
+
+      timer.then(() => {
+        expect(input.element.value).toBe('changed');
+
+        jest.useRealTimers();
+        wrapper.unmount();
+      });
+    }, 0);
+  });
 });