fix: Input[allowClear] className (#27462)

* fix: Input[allowClear] className missing close #27444 * fix snapshot
2024-12-01 03:29:39 +08:00 · 2020-10-30 15:27:37 +08:00 · 2020-10-30 15:27:37 +08:00 · 39e37bf1b4
commit 39e37bf1b4
parent 5669d9c65a
7 changed files with 94 additions and 76 deletions
--- 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"
--- 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}>
--- 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', () => {
--- 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"
--- 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"
--- 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>
-`;
--- 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);
+  });
 });