From 47e53ab0fe2d1231c1d07aa90b2c92f6f44e076e Mon Sep 17 00:00:00 2001
From: zombieJ <smith3816@gmail.com>
Date: Tue, 12 Feb 2019 21:39:36 +0800
Subject: [PATCH] Fix Input.Search not support addonAfter (#14799)

* fix addonAfter

* update snapshot
---
 components/input/Search.tsx                   | 38 +++++---
 components/input/__tests__/Search.test.js     |  9 ++
 .../__snapshots__/Search.test.js.snap         | 96 +++++++++++++++++++
 .../__snapshots__/index.test.js.snap          |  1 -
 4 files changed, 128 insertions(+), 16 deletions(-)

diff --git a/components/input/Search.tsx b/components/input/Search.tsx
index 743c055615..c75b940109 100644
--- a/components/input/Search.tsx
+++ b/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,20 +85,26 @@ export default class Search extends React.Component<SearchProps, any> {
             }
           : {}),
       });
+    } else {
+      button = (
+        <Button
+          className={btnClassName}
+          type="primary"
+          size={size}
+          disabled={disabled}
+          key="enterButton"
+          onClick={this.onSearch}
+        >
+          {enterButton === true ? <Icon type="search" /> : enterButton}
+        </Button>
+      );
     }
 
-    return (
-      <Button
-        className={btnClassName}
-        type="primary"
-        size={size}
-        disabled={disabled}
-        key="enterButton"
-        onClick={this.onSearch}
-      >
-        {enterButton === true ? <Icon type="search" /> : enterButton}
-      </Button>
-    );
+    if (addonAfter) {
+      return [button, addonAfter];
+    }
+
+    return button;
   };
 
   renderSearch = ({ getPrefixCls }: ConfigConsumerProps) => {
diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js
index 09779bf9a8..e469f5714c 100644
--- a/components/input/__tests__/Search.test.js
+++ b/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();
+  });
 });
diff --git a/components/input/__tests__/__snapshots__/Search.test.js.snap b/components/input/__tests__/__snapshots__/Search.test.js.snap
index fa59d332b9..66dc25669a 100644
--- a/components/input/__tests__/__snapshots__/Search.test.js.snap
+++ b/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"
diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap
index 0eb020d68f..33a95e43af 100644
--- a/components/input/__tests__/__snapshots__/index.test.js.snap
+++ b/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]}