From 27e9926438ba533143257ac19957584722c95afd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= <afc163@gmail.com>
Date: Tue, 20 Oct 2020 21:44:37 +0800
Subject: [PATCH] fix: duplicated className on Search[allowClear] (#27261)

* fix: duplicated className on Search[allowClear]

close #27258

* fix snapshot
---
 .../__tests__/__snapshots__/demo.test.js.snap |  2 +-
 components/input/ClearableLabeledInput.tsx    | 26 +++++++++----------
 components/input/__tests__/Search.test.js     |  7 +++++
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 4960cd3110..0965a8fd05 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -7622,7 +7622,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-affix-wrapper ant-input-password"
+            class="ant-input-affix-wrapper"
           >
             <input
               action="click"
diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx
index b15350a7dc..c049a72a63 100644
--- a/components/input/ClearableLabeledInput.tsx
+++ b/components/input/ClearableLabeledInput.tsx
@@ -112,20 +112,18 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
 
     const prefixNode = prefix ? <span className={`${prefixCls}-prefix`}>{prefix}</span> : null;
 
-    const affixWrapperCls = classNames(
-      `${prefixCls}-affix-wrapper`,
-      {
-        [`${prefixCls}-affix-wrapper-focused`]: focused,
-        [`${prefixCls}-affix-wrapper-disabled`]: disabled,
-        [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
-        [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
-        [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value,
-        [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
-        [`${prefixCls}-affix-wrapper-readonly`]: readOnly,
-        [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
-      },
-      className,
-    );
+    const affixWrapperCls = classNames(`${prefixCls}-affix-wrapper`, {
+      [`${prefixCls}-affix-wrapper-focused`]: focused,
+      [`${prefixCls}-affix-wrapper-disabled`]: disabled,
+      [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
+      [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
+      [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value,
+      [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+      [`${prefixCls}-affix-wrapper-readonly`]: readOnly,
+      [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+      // https://github.com/ant-design/ant-design/issues/27258
+      [`${className}`]: !allowClear && className,
+    });
     return (
       <span
         ref={this.containerRef}
diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js
index 4090389081..49f0546be6 100644
--- a/components/input/__tests__/Search.test.js
+++ b/components/input/__tests__/Search.test.js
@@ -209,4 +209,11 @@ describe('Input.Search', () => {
       wrapper.find('button').simulate('mousedown');
     }).not.toThrow();
   });
+
+  // https://github.com/ant-design/ant-design/issues/27258
+  it('Search with allowClear should have one className only', () => {
+    const wrapper = mount(<Search allowClear className="className" />);
+    expect(wrapper.find('.ant-input-group-wrapper').hasClass('className')).toBe(true);
+    expect(wrapper.find('.ant-input-affix-wrapper').hasClass('className')).toBe(false);
+  });
 });