chore: Not block input when Input value is undefined (#20783)

* chore: Input should not block input when `value` is undefined

* add test casw

* Fix test case & add breaking change in changelog

* fix prevValue logic

* patch change log

CHANGELOG.en-US.md

@@ -68,7 +68,9 @@ Ant Design 4.0-rc released! Here is the release [document](https://github.com/an
 - 🌟 Tree supports virtual scrolling. [#18172](https://github.com/ant-design/ant-design/pull/18172)
 - 🌟 Tree Enhanced accessibility support and keyboard interaction. [#18866](https://github.com/ant-design/ant-design/pull/18866)
 - 🌟 Select uses virtual scrolling and enhanced accessibility support and keyboard interaction. [#18658](https://github.com/ant-design/ant-design/pull/18658)
+  - 🌟 Uncontrolled mode when `value` is `undefined` now.
 - 🌟 TreeSelect uses virtual scrolling and optimizes keyboard support. [#19040](https://github.com/ant-design/ant-design/pull/19040)
+  - 🌟 Uncontrolled mode when `value` is `undefined` now.
 - 🌟 Button adds `default` and`link` styles for `danger`. [#19837](https://github.com/ant-design/ant-design/pull/19837)
 - 🌟 Form and ConfigProvider support `size` setting to include component size. [#20570](https://github.com/ant-design/ant-design/pull/20570)
 - 🌟 Typography adds `suffix` attribute. [#20224](https://github.com/ant-design/ant-design/pull/20224)

CHANGELOG.zh-CN.md

@@ -68,7 +68,9 @@ Ant Design 4.0-rc 发布，发布文档请查看[此处](https://github.com/ant-
 - 🌟 Tree 支持虚拟滚动。[#18172](https://github.com/ant-design/ant-design/pull/18172)
 - 🌟 Tree 增强无障碍支持以及键盘交互。[#18866](https://github.com/ant-design/ant-design/pull/18866)
 - 🌟 Select 使用虚拟滚动并增强无障碍支持以及键盘交互。[#18658](https://github.com/ant-design/ant-design/pull/18658)
+  - 🌟 `value` 为 `undefined` 时，改为非受控模式。
 - 🌟 TreeSelect 使用虚拟滚动并优化键盘支持。[#19040](https://github.com/ant-design/ant-design/pull/19040)
+  - 🌟 `value` 为 `undefined` 时，改为非受控模式。
 - 🌟 Button 添加 `danger` 的 `default` 和 `link` 样式。[#19837](https://github.com/ant-design/ant-design/pull/19837)
 - 🌟 Form 与 ConfigProvider 支持 `size` 设置包含组件尺寸。[#20570](https://github.com/ant-design/ant-design/pull/20570)
 - 🌟 Typography 增加 `suffix` 属性。[#20224](https://github.com/ant-design/ant-design/pull/20224)

components/input/ClearableLabeledInput.tsx

@@ -18,7 +18,6 @@ interface BasicProps {
   prefixCls: string;
   inputType: typeof ClearableInputType[number];
   value?: any;
-  defaultValue?: any;
   allowClear?: boolean;
   element: React.ReactElement<any>;
   handleReset: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;

components/input/Input.tsx

@@ -72,6 +72,8 @@ export function getInputClassName(
 
 export interface InputState {
   value: any;
+  /** `value` from prev props */
+  prevValue: any;
 }
 
 class Input extends React.Component<InputProps, InputState> {
@@ -100,16 +102,17 @@ class Input extends React.Component<InputProps, InputState> {
     const value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
     this.state = {
       value,
+      // eslint-disable-next-line react/no-unused-state
+      prevValue: props.value,
     };
   }
 
-  static getDerivedStateFromProps(nextProps: InputProps) {
-    if ('value' in nextProps) {
-      return {
-        value: nextProps.value,
-      };
+  static getDerivedStateFromProps(nextProps: InputProps, { prevValue }: InputState) {
+    const newState: Partial<InputState> = { prevValue: nextProps.value };
+    if (nextProps.value !== undefined || prevValue !== nextProps.value) {
+      newState.value = nextProps.value;
     }
-    return null;
+    return newState;
   }
 
   componentDidMount() {
@@ -158,7 +161,7 @@ class Input extends React.Component<InputProps, InputState> {
   };
 
   setValue(value: string, callback?: () => void) {
-    if (!('value' in this.props)) {
+    if (this.props.value === undefined) {
       this.setState({ value }, callback);
     }
   }

components/input/__tests__/index.test.js

@@ -442,4 +442,15 @@ describe('TextArea allowClear', () => {
     const wrapper = mount(<TextArea allowClear defaultValue="111" disabled />);
     expect(wrapper.find('.ant-input-textarea-clear-icon').length).toBe(0);
   });
+
+  it('not block input when `value` is undefined', () => {
+    const wrapper = mount(<Input value={undefined} />);
+    wrapper.find('input').simulate('change', { target: { value: 'Bamboo' } });
+    expect(wrapper.find('input').props().value).toEqual('Bamboo');
+
+    // Controlled
+    wrapper.setProps({ value: 'Light' });
+    wrapper.find('input').simulate('change', { target: { value: 'Bamboo' } });
+    expect(wrapper.find('input').props().value).toEqual('Light');
+  });
 });

docs/react/migration-v4.en-US.md

@@ -115,6 +115,7 @@ const Demo = () => (
   - `dropdownMatchSelectWidth` no longer automatically adapts to the content width, please set the dropdown width with numbers.
 - The Grid component uses flex layout.
 - Button's `danger` is now treated as a property instead of a button type.
+- Input, Select set `value` to `undefined` is uncontrolled mode now.
 
 ## Start upgrading
 

docs/react/migration-v4.zh-CN.md

@@ -115,6 +115,7 @@ const Demo = () => (
   - `dropdownMatchSelectWidth` 不再自动适应内容宽度，请用数字设置下拉宽度。
 - Grid 组件使用 flex 布局。
 - Button 的 `danger` 现在作为一个属性而不是按钮类型。
+- Input、Select 的 `value` 为 `undefined` 时改为非受控状态。
 
 ## 开始升级