feat: ConfigProvider support config Input autoComplete

components/config-provider/__tests__/index.test.js

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import ConfigProvider from '..';
 import Button from '../../button';
 import Table from '../../table';
+import Input from '../../input';
 import mountTest from '../../../tests/shared/mountTest';
 
 describe('ConfigProvider', () => {
@@ -54,4 +55,14 @@ describe('ConfigProvider', () => {
 
     expect(wrapper.find('button').props().className).toEqual('bamboo-btn');
   });
+
+  it('input autoComplete', () => {
+    const wrapper = mount(
+      <ConfigProvider input={{ autoComplete: 'off' }}>
+        <Input />
+      </ConfigProvider>,
+    );
+
+    expect(wrapper.find('input').props().autoComplete).toEqual('off');
+  });
 });

components/config-provider/context.tsx

@@ -14,6 +14,9 @@ export interface ConfigConsumerProps {
   renderEmpty: RenderEmptyHandler;
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
+  input?: {
+    autoComplete?: string;
+  };
   locale?: Locale;
   pageHeader?: {
     ghost: boolean;

components/config-provider/index.en-US.md

@@ -41,6 +41,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |  |
+| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
 | renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | Function(componentName: string): ReactNode | - |  |
 | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` |  |
 | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object |  |

components/config-provider/index.tsx

@@ -33,6 +33,9 @@ export interface ConfigProviderProps {
   form?: {
     validateMessages?: ValidateMessages;
   };
+  input?: {
+    autoComplete?: string;
+  };
   locale?: Locale;
   pageHeader?: {
     ghost: boolean;
@@ -65,6 +68,7 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       csp,
       autoInsertSpaceInButton,
       form,
+      input,
       locale,
       pageHeader,
       componentSize,
@@ -94,6 +98,10 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       config.pageHeader = pageHeader;
     }
 
+    if (input) {
+      config.input = input;
+    }
+
     let childNode = children;
 
     // Additional Form provider

components/config-provider/index.zh-CN.md

@@ -42,6 +42,7 @@ return (
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |  |
+| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
 | renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | Function(componentName: string): ReactNode | - |  |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body |  |
 | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - |  |

components/input/Input.tsx

@@ -217,7 +217,11 @@ class Input extends React.Component<InputProps, InputState> {
     resolveOnChange(this.input, e, this.props.onChange);
   };
 
-  renderInput = (prefixCls: string, size?: SizeType) => {
+  renderInput = (
+    prefixCls: string,
+    size: SizeType | undefined,
+    input: ConfigConsumerProps['input'] = {},
+  ) => {
     const { className, addonBefore, addonAfter, size: customizeSize, disabled } = this.props;
     // Fix https://fb.me/react-unknown-prop
     const otherProps = omit(this.props, [
@@ -236,6 +240,7 @@ class Input extends React.Component<InputProps, InputState> {
     ]);
     return (
       <input
+        autoComplete={input.autoComplete}
         {...otherProps}
         onChange={this.handleChange}
         onFocus={this.onFocus}
@@ -280,11 +285,12 @@ class Input extends React.Component<InputProps, InputState> {
     }
   };
 
-  renderComponent = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
+  renderComponent = ({ getPrefixCls, direction, input }: ConfigConsumerProps) => {
     const { value, focused } = this.state;
     const { prefixCls: customizePrefixCls } = this.props;
     const prefixCls = getPrefixCls('input', customizePrefixCls);
     this.direction = direction;
+
     return (
       <SizeContext.Consumer>
         {size => (
@@ -294,7 +300,7 @@ class Input extends React.Component<InputProps, InputState> {
             prefixCls={prefixCls}
             inputType="input"
             value={fixControlledValue(value)}
-            element={this.renderInput(prefixCls, size)}
+            element={this.renderInput(prefixCls, size, input)}
             handleReset={this.handleReset}
             ref={this.saveClearableInput}
             direction={direction}