Fix Input.Search not support addonAfter (#14799)

* fix addonAfter

* update snapshot

components/input/Search.tsx

@@ -68,14 +68,16 @@ export default class Search extends React.Component<SearchProps, any> {
   };
 
   renderAddonAfter = (prefixCls: string) => {
-    const { enterButton, size, disabled } = this.props;
-    if (!enterButton) return null;
+    const { enterButton, size, disabled, addonAfter } = this.props;
+    if (!enterButton) return addonAfter;
     const btnClassName = `${prefixCls}-button`;
 
+    let button: React.ReactNode;
     const enterButtonAsElement = enterButton as React.ReactElement<any>;
     if (enterButtonAsElement.type === Button || enterButtonAsElement.type === 'button') {
-      return React.cloneElement(enterButtonAsElement, {
+      button = React.cloneElement(enterButtonAsElement, {
         onClick: this.onSearch,
+        key: 'enterButton',
         ...(enterButtonAsElement.type === Button
           ? {
               className: btnClassName,
@@ -83,9 +85,8 @@ export default class Search extends React.Component<SearchProps, any> {
             }
           : {}),
       });
-    }
-
-    return (
+    } else {
+      button = (
         <Button
           className={btnClassName}
           type="primary"
@@ -97,6 +98,13 @@ export default class Search extends React.Component<SearchProps, any> {
           {enterButton === true ? <Icon type="search" /> : enterButton}
         </Button>
       );
+    }
+
+    if (addonAfter) {
+      return [button, addonAfter];
+    }
+
+    return button;
   };
 
   renderSearch = ({ getPrefixCls }: ConfigConsumerProps) => {

components/input/__tests__/Search.test.js

@@ -126,4 +126,13 @@ describe('Input.Search', () => {
       }),
     );
   });
+
+  // https://github.com/ant-design/ant-design/issues/14785
+  it('should support addonAfter', () => {
+    const addonAfter = <span>Addon After</span>;
+    const wrapper = mount(<Search addonAfter={addonAfter} />);
+    const wrapperWithEnterButton = mount(<Search enterButton addonAfter={addonAfter} />);
+    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapperWithEnterButton.render()).toMatchSnapshot();
+  });
 });

components/input/__tests__/__snapshots__/Search.test.js.snap

@@ -1,5 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Input.Search should support addonAfter 1`] = `
+<span
+  class="ant-input-search ant-input-group-wrapper"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <span
+      class="ant-input-search ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <i
+          aria-label="icon: search"
+          class="anticon anticon-search ant-input-search-icon"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="search"
+            fill="currentColor"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+            />
+          </svg>
+        </i>
+      </span>
+    </span>
+    <span
+      class="ant-input-group-addon"
+    >
+      <span>
+        Addon After
+      </span>
+    </span>
+  </span>
+</span>
+`;
+
+exports[`Input.Search should support addonAfter 2`] = `
+<span
+  class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <input
+      class="ant-input"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-input-group-addon"
+    >
+      <button
+        class="ant-btn ant-input-search-button ant-btn-primary"
+        type="button"
+      >
+        <i
+          aria-label="icon: search"
+          class="anticon anticon-search"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="search"
+            fill="currentColor"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+            />
+          </svg>
+        </i>
+      </button>
+      <span>
+        Addon After
+      </span>
+    </span>
+  </span>
+</span>
+`;
+
 exports[`Input.Search should support custom Button 1`] = `
 <span
   class="ant-input-search ant-input-search-enter-button ant-input-group-wrapper"

components/input/__tests__/__snapshots__/index.test.js.snap

@@ -541,7 +541,6 @@ exports[`Input.Search should support suffix 1`] = `
 >
   <Consumer>
     <Input
-      addonAfter={null}
       className="ant-input-search"
       disabled={false}
       onPressEnter={[Function]}