Warning Input by: add or remove prefix / suffix when Input is focused (#14948)

* todo

* add warning

* add FAQ

* fix typo

components/input/Input.tsx

@@ -10,6 +10,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import Password from './Password';
 import Icon from '../icon';
 import { Omit, tuple } from '../_util/type';
+import warning from '../_util/warning';
 
 function fixControlledValue<T>(value: T) {
   if (typeof value === 'undefined' || value === null) {
@@ -18,6 +19,10 @@ function fixControlledValue<T>(value: T) {
   return value;
 }
 
+function hasPrefixSuffix(props: InputProps) {
+  return 'prefix' in props || props.suffix || props.allowClear;
+}
+
 const InputSizes = tuple('small', 'default', 'large');
 
 export interface InputProps
@@ -84,6 +89,20 @@ class Input extends React.Component<InputProps, any> {
     };
   }
 
+  getSnapshotBeforeUpdate(prevProps: InputProps) {
+    if (hasPrefixSuffix(prevProps) !== hasPrefixSuffix(this.props)) {
+      warning(
+        this.input !== document.activeElement,
+        `When Input is focused, dynamic add or remove prefix / suffix will make it lose focus caused by dom structure change. Read more: https://ant.design/components/input/#FAQ`,
+      );
+    }
+    return null;
+  }
+
+  // Since polyfill `getSnapshotBeforeUpdate` need work with `componentDidUpdate`.
+  // We keep an empty function here.
+  componentDidUpdate() {}
+
   handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const { onPressEnter, onKeyDown } = this.props;
     if (e.keyCode === 13 && onPressEnter) {
@@ -224,7 +243,7 @@ class Input extends React.Component<InputProps, any> {
     const { props } = this;
     const suffix = this.renderSuffix(prefixCls);
 
-    if (!('prefix' in props) && !suffix) {
+    if (!hasPrefixSuffix(props)) {
       return children;
     }
 

components/input/demo/presuffix.md

@@ -1,8 +1,8 @@
 ---
 order: 8
 title:
-    zh-CN: 前缀和后缀
-    en-US: prefix and suffix
+  zh-CN: 前缀和后缀
+  en-US: prefix and suffix
 ---
 
 ## zh-CN

components/input/index.en-US.md

@@ -80,3 +80,16 @@ Supports all props of `Input`.
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | visibilityToggle | Whether show toggle button | boolean | true |
+
+## FAQ
+
+### Why Input lose focus when change `prefix/suffix`
+
+When Input dynamic add or remove `prefix/suffix` will make React recreate the dom structure and new input will be not focused.
+You can set an empty `<span />` element to keep the dom structure:
+
+```jsx
+const suffix = condition ? <Icon type="smile" /> : <span />;
+
+<Input suffix={suffix} />
+```

components/input/index.zh-CN.md

@@ -77,3 +77,16 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | visibilityToggle | 是否显示切换按钮 | boolean | true |
+
+## FAQ
+
+### 为什么我动态改变 `prefix/suffix` 时，Input 会失去焦点？
+
+当 Input 动态添加或者删除 `prefix/suffix` 时，React 会重新创建 DOM 结构而新的 input 是没有焦点的。
+你可以预设一个空的 `<span />` 来保持 DOM 结构不变：
+
+```jsx
+const suffix = condition ? <Icon type="smile" /> : <span />;
+
+<Input suffix={suffix} />
+```