fix: Input[allowClear] className (#27462)

* fix: Input[allowClear] className missing close #27444 * fix snapshot
ant-design · Oct 30, 2020 · 39e37bf · 39e37bf
1 parent 5669d9c
commit 39e37bf
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 76 deletions.
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -7623,7 +7623,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-affix-wrapper"
+            class="ant-input-affix-wrapper ant-input-password"
           >
             <input
               action="click"

diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx
@@ -12,6 +12,10 @@ export function hasPrefixSuffix(props: InputProps | ClearableInputProps) {
   return !!(props.prefix || props.suffix || props.allowClear);
 }
 
+function hasAddon(props: InputProps | ClearableInputProps) {
+  return !!(props.addonBefore || props.addonAfter);
+}
+
 /**
  * This basic props required for input and textarea.
  */
@@ -121,8 +125,8 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
       [`${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,
+      // className will go to addon wrapper
+      [`${className}`]: !hasAddon(this.props) && className,
     });
     return (
       <span
@@ -145,7 +149,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
   renderInputWithLabel(prefixCls: string, labeledElement: React.ReactElement) {
     const { addonBefore, addonAfter, style, size, className, direction } = this.props;
     // Not wrap when there is not addons
-    if (!addonBefore && !addonAfter) {
+    if (!hasAddon(this.props)) {
       return labeledElement;
     }
 
@@ -156,8 +160,7 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
     ) : null;
     const addonAfterNode = addonAfter ? <span className={addonClassName}>{addonAfter}</span> : null;
 
-    const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, {
-      [wrapperClassName]: addonBefore || addonAfter,
+    const mergedWrapperClassName = classNames(`${prefixCls}-wrapper`, wrapperClassName, {
       [`${wrapperClassName}-rtl`]: direction === 'rtl',
     });
 
@@ -197,8 +200,9 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
       {
         [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
         [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+        // className will go to addon wrapper
+        [`${className}`]: !hasAddon(this.props) && className,
       },
-      className,
     );
     return (
       <span className={affixWrapperCls} style={style}>

diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js
@@ -22,10 +22,8 @@ describe('Input.Search', () => {
   });
 
   it('should support ReactNode suffix without error', () => {
-    const fn = () => {
-      mount(<Search suffix={<div>ok</div>} />);
-    };
-    expect(fn).not.toThrow();
+    const wrapper = mount(<Search suffix={<div>ok</div>} />);
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should disable enter button when disabled prop is true', () => {

diff --git a/components/input/__tests__/__snapshots__/Search.test.js.snap b/components/input/__tests__/__snapshots__/Search.test.js.snap
@@ -45,6 +45,62 @@ exports[`Input.Search rtl render component should be rendered correctly in RTL d
 </span>
 `;
 
+exports[`Input.Search should support ReactNode suffix without error 1`] = `
+<span
+  class="ant-input-group-wrapper ant-input-search"
+>
+  <span
+    class="ant-input-wrapper ant-input-group"
+  >
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <div>
+          ok
+        </div>
+      </span>
+    </span>
+    <span
+      class="ant-input-group-addon"
+    >
+      <button
+        class="ant-btn ant-btn-icon-only ant-input-search-button"
+        type="button"
+      >
+        <span
+          aria-label="search"
+          class="anticon anticon-search"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="search"
+            fill="currentColor"
+            focusable="false"
+            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 0011.6 0l43.6-43.5a8.2 8.2 0 000-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>
+        </span>
+      </button>
+    </span>
+  </span>
+</span>
+`;
+
 exports[`Input.Search should support addonAfter 1`] = `
 <span
   class="ant-input-group-wrapper ant-input-search"
@@ -149,7 +205,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
     class="ant-input-wrapper ant-input-group"
   >
     <span
-      class="ant-input-affix-wrapper ant-input-search"
+      class="ant-input-affix-wrapper"
     >
       <input
         class="ant-input"
@@ -208,7 +264,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
     class="ant-input-wrapper ant-input-group"
   >
     <span
-      class="ant-input-affix-wrapper ant-input-search ant-input-search-with-button"
+      class="ant-input-affix-wrapper"
     >
       <input
         class="ant-input"
@@ -365,7 +421,7 @@ exports[`Input.Search should support invalid suffix 1`] = `
     class="ant-input-wrapper ant-input-group"
   >
     <span
-      class="ant-input-affix-wrapper ant-input-search"
+      class="ant-input-affix-wrapper"
     >
       <input
         class="ant-input"

diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -2737,7 +2737,7 @@ Array [
       class="ant-input-wrapper ant-input-group"
     >
       <span
-        class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button"
+        class="ant-input-affix-wrapper ant-input-affix-wrapper-lg"
       >
         <input
           class="ant-input ant-input-lg"

diff --git a/components/input/__tests__/__snapshots__/index.test.js.snap b/components/input/__tests__/__snapshots__/index.test.js.snap
@@ -354,57 +354,3 @@ exports[`Input should support size in form 1`] = `
   </div>
 </form>
 `;
-
-exports[`Input.Search should support suffix 1`] = `
-<span
-  class="ant-input-group-wrapper ant-input-search"
->
-  <span
-    class="ant-input-wrapper ant-input-group"
-  >
-    <span
-      class="ant-input-affix-wrapper ant-input-search"
-    >
-      <input
-        class="ant-input"
-        type="text"
-        value=""
-      />
-      <span
-        class="ant-input-suffix"
-      >
-        suffix
-      </span>
-    </span>
-    <span
-      class="ant-input-group-addon"
-    >
-      <button
-        class="ant-btn ant-btn-icon-only ant-input-search-button"
-        type="button"
-      >
-        <span
-          aria-label="search"
-          class="anticon anticon-search"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="search"
-            fill="currentColor"
-            focusable="false"
-            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 0011.6 0l43.6-43.5a8.2 8.2 0 000-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>
-        </span>
-      </button>
-    </span>
-  </span>
-</span>
-`;
diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js
@@ -76,6 +76,20 @@ describe('Input', () => {
   });
 });
 
+describe('prefix and suffix', () => {
+  it('should support className when has suffix', () => {
+    const wrapper = mount(<Input suffix="suffix" className="my-class-name" />);
+    expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
+    expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
+  });
+
+  it('should support className when has prefix', () => {
+    const wrapper = mount(<Input prefix="prefix" className="my-class-name" />);
+    expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
+    expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
+  });
+});
+
 describe('As Form Control', () => {
   it('should be reset when wrapped in form.getFieldDecorator without initialValue', () => {
     const Demo = () => {
@@ -110,13 +124,6 @@ describe('As Form Control', () => {
   });
 });
 
-describe('Input.Search', () => {
-  it('should support suffix', () => {
-    const wrapper = mount(<Input.Search suffix="suffix" />);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-});
-
 describe('Input allowClear', () => {
   it('should change type when click', () => {
     const wrapper = mount(<Input allowClear />);
@@ -189,4 +196,11 @@ describe('Input allowClear', () => {
       expect(wrapper.find('.ant-input-clear-icon-hidden').exists()).toBeTruthy();
     });
   });
+
+  // https://github.com/ant-design/ant-design/issues/27444
+  it('should support className', () => {
+    const wrapper = mount(<Input allowClear className="my-class-name" />);
+    expect(wrapper.getDOMNode().className.includes('my-class-name')).toBe(true);
+    expect(wrapper.find('input').getDOMNode().className.includes('my-class-name')).toBe(false);
+  });
 });