From 02a71d0ddd613200350f4664b0adfbaaa3a1f441 Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Sun, 9 Feb 2020 11:57:42 +0800
Subject: [PATCH] fix: form item Input size error with prefix or suffix
 (#21290)

* fix form item Input size error with prefix and suffix

* snapshot

* add test case

* revert width
---
 components/input/Input.tsx                    |   1 +
 components/input/Password.tsx                 |  23 +--
 .../__tests__/__snapshots__/demo.test.js.snap | 159 +++++++++++++++--
 .../__snapshots__/index.test.js.snap          | 168 ++++++++++++++++++
 components/input/__tests__/index.test.js      |  18 ++
 components/input/demo/size.md                 |  10 +-
 6 files changed, 346 insertions(+), 33 deletions(-)

diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index 05110839bc..ca9e450167 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -263,6 +263,7 @@ class Input extends React.Component<InputProps, InputState> {
       <SizeContext.Consumer>
         {size => (
           <ClearableLabeledInput
+            size={size}
             {...this.props}
             prefixCls={prefixCls}
             inputType="input"
diff --git a/components/input/Password.tsx b/components/input/Password.tsx
index 1e5c703455..6f0673ea95 100644
--- a/components/input/Password.tsx
+++ b/components/input/Password.tsx
@@ -91,16 +91,17 @@ export default class Password extends React.Component<PasswordProps, PasswordSta
     const inputClassName = classNames(prefixCls, className, {
       [`${prefixCls}-${size}`]: !!size,
     });
-    return (
-      <Input
-        {...omit(restProps, ['suffix'])}
-        type={this.state.visible ? 'text' : 'password'}
-        size={size}
-        className={inputClassName}
-        prefixCls={inputPrefixCls}
-        suffix={suffixIcon}
-        ref={this.saveInput}
-      />
-    );
+    const props = {
+      ...omit(restProps, ['suffix']),
+      type: this.state.visible ? 'text' : 'password',
+      className: inputClassName,
+      prefixCls: inputPrefixCls,
+      suffix: suffixIcon,
+      ref: this.saveInput,
+    };
+    if (size) {
+      props.size = size;
+    }
+    return <Input {...props} />;
   }
 }
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 63181be156..92322dd54c 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -2042,24 +2042,147 @@ exports[`renders ./components/input/demo/size.md correctly 1`] = `
 <div
   class="example-input"
 >
-  <input
-    class="ant-input ant-input-lg"
-    placeholder="large size"
-    type="text"
-    value=""
-  />
-  <input
-    class="ant-input"
-    placeholder="default size"
-    type="text"
-    value=""
-  />
-  <input
-    class="ant-input ant-input-sm"
-    placeholder="small size"
-    type="text"
-    value=""
-  />
+  <span
+    class="ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+  >
+    <span
+      class="ant-input-prefix"
+    >
+      <span
+        aria-label="user"
+        class="anticon anticon-user"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="user"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </span>
+    <input
+      class="ant-input ant-input-lg"
+      placeholder="large size"
+      type="text"
+      value=""
+    />
+  </span>
+  <span
+    class="ant-input-affix-wrapper"
+  >
+    <span
+      class="ant-input-prefix"
+    >
+      <span
+        aria-label="user"
+        class="anticon anticon-user"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="user"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </span>
+    <input
+      class="ant-input"
+      placeholder="default size"
+      type="text"
+      value=""
+    />
+  </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-affix-wrapper-sm"
+  >
+    <span
+      class="ant-input-prefix"
+    >
+      <span
+        aria-label="user"
+        class="anticon anticon-user"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="user"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+          />
+        </svg>
+      </span>
+    </span>
+    <input
+      class="ant-input ant-input-sm"
+      placeholder="small size"
+      type="text"
+      value=""
+    />
+  </span>
+  <span
+    class="ant-input-password ant-input-password-large ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+  >
+    <input
+      action="click"
+      class="ant-input ant-input-lg"
+      placeholder="large Password"
+      type="password"
+      value=""
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        aria-label="eye-invisible"
+        class="anticon anticon-eye-invisible ant-input-password-icon"
+        role="img"
+        tabindex="-1"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="eye-invisible"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"
+          />
+          <path
+            d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"
+          />
+        </svg>
+      </span>
+    </span>
+  </span>
 </div>
 `;
 
diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap
index 673aeaeed3..ad11468044 100644
--- a/components/input/__tests__/__snapshots__/index.test.js.snap
+++ b/components/input/__tests__/__snapshots__/index.test.js.snap
@@ -504,6 +504,174 @@ exports[`Input should support maxLength 1`] = `
 </Input>
 `;
 
+exports[`Input should support size 1`] = `
+<Input
+  size="large"
+  type="text"
+>
+  <ClearableLabeledInput
+    element={
+      <input
+        className="ant-input ant-input-lg"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        type="text"
+      />
+    }
+    focused={false}
+    handleReset={[Function]}
+    inputType="input"
+    prefixCls="ant-input"
+    size="large"
+    type="text"
+    value=""
+  >
+    <input
+      className="ant-input ant-input-lg"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="text"
+      value=""
+    />
+  </ClearableLabeledInput>
+</Input>
+`;
+
+exports[`Input should support size in form 1`] = `
+<ForwardRef(InternalForm)
+  size="large"
+>
+  <SizeContextProvider
+    size="large"
+  >
+    <ForwardRef(Form)
+      className="ant-form ant-form-horizontal"
+      form={
+        Object {
+          "__INTERNAL__": Object {
+            "name": undefined,
+          },
+          "getFieldError": [Function],
+          "getFieldValue": [Function],
+          "getFieldsError": [Function],
+          "getFieldsValue": [Function],
+          "getInternalHooks": [Function],
+          "isFieldTouched": [Function],
+          "isFieldValidating": [Function],
+          "isFieldsTouched": [Function],
+          "isFieldsValidating": [Function],
+          "resetFields": [Function],
+          "scrollToField": [Function],
+          "setFields": [Function],
+          "setFieldsValue": [Function],
+          "submit": [Function],
+          "validateFields": [Function],
+        }
+      }
+      size="large"
+    >
+      <form
+        className="ant-form ant-form-horizontal"
+        onSubmit={[Function]}
+        size="large"
+      >
+        <FormItem>
+          <Row
+            className="ant-form-item"
+            gutter={0}
+            key="row"
+          >
+            <div
+              className="ant-row ant-form-item"
+              style={Object {}}
+            >
+              <FormItemLabel
+                prefixCls="ant-form"
+              />
+              <FormItemInput
+                errors={Array []}
+                onDomErrorVisibleChange={[Function]}
+                prefixCls="ant-form"
+                validateStatus=""
+              >
+                <Col
+                  className="ant-form-item-control"
+                >
+                  <div
+                    className="ant-col ant-form-item-control"
+                    style={Object {}}
+                  >
+                    <div
+                      className="ant-form-item-control-input"
+                    >
+                      <Input
+                        type="text"
+                      >
+                        <ClearableLabeledInput
+                          element={
+                            <input
+                              className="ant-input ant-input-lg"
+                              onBlur={[Function]}
+                              onChange={[Function]}
+                              onFocus={[Function]}
+                              onKeyDown={[Function]}
+                              type="text"
+                            />
+                          }
+                          focused={false}
+                          handleReset={[Function]}
+                          inputType="input"
+                          prefixCls="ant-input"
+                          size="large"
+                          type="text"
+                          value=""
+                        >
+                          <input
+                            className="ant-input ant-input-lg"
+                            onBlur={[Function]}
+                            onChange={[Function]}
+                            onFocus={[Function]}
+                            onKeyDown={[Function]}
+                            type="text"
+                            value=""
+                          />
+                        </ClearableLabeledInput>
+                      </Input>
+                    </div>
+                    <ForwardRef
+                      motionAppear={true}
+                      motionName="show-help"
+                      onLeaveEnd={[Function]}
+                      removeOnLeave={true}
+                      visible={false}
+                    >
+                      <CSSMotion
+                        internalRef={null}
+                        motionAppear={true}
+                        motionEnter={true}
+                        motionLeave={true}
+                        motionName="show-help"
+                        onLeaveEnd={[Function]}
+                        removeOnLeave={true}
+                        visible={false}
+                      />
+                    </ForwardRef>
+                  </div>
+                </Col>
+              </FormItemInput>
+            </div>
+          </Row>
+        </FormItem>
+      </form>
+    </ForwardRef(Form)>
+  </SizeContextProvider>
+</ForwardRef(InternalForm)>
+`;
+
 exports[`Input.Search should support suffix 1`] = `
 <Search
   enterButton={false}
diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js
index e009ab412c..6c56b1f5ee 100644
--- a/components/input/__tests__/index.test.js
+++ b/components/input/__tests__/index.test.js
@@ -38,6 +38,24 @@ describe('Input', () => {
     wrapper.instance().select();
   });
 
+  it('should support size', () => {
+    const wrapper = mount(<Input size="large" />);
+    expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should support size in form', () => {
+    const wrapper = mount(
+      <Form size="large">
+        <Form.Item>
+          <Input />
+        </Form.Item>
+      </Form>,
+    );
+    expect(wrapper.find('input').hasClass('ant-input-lg')).toBe(true);
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('focus trigger warning', () => {
     it('not trigger', () => {
       const wrapper = mount(<Input suffix="bamboo" />);
diff --git a/components/input/demo/size.md b/components/input/demo/size.md
index 09665899c8..ad1faa65bc 100644
--- a/components/input/demo/size.md
+++ b/components/input/demo/size.md
@@ -15,19 +15,21 @@ There are three sizes of an Input box: `large` (40px), `default` (32px) and `sma
 
 ```jsx
 import { Input } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div className="example-input">
-    <Input size="large" placeholder="large size" />
-    <Input placeholder="default size" />
-    <Input size="small" placeholder="small size" />
+    <Input size="large" placeholder="large size" prefix={<UserOutlined />} />
+    <Input placeholder="default size" prefix={<UserOutlined />} />
+    <Input size="small" placeholder="small size" prefix={<UserOutlined />} />
+    <Input.Password size="large" placeholder="large Password" />
   </div>,
   mountNode,
 );
 ```
 
 ```css
-.example-input .ant-input {
+.example-input > span {
   width: 200px;
   margin: 0 8px 8px 0;
 }