Input: Clear icon doesn't disappear if value is null (vs undefined or empy string) (#14733)

* fixed issue with allowClear if value is null

* added test cases for allowClear fix

components/input/Input.tsx

@@ -157,7 +157,7 @@ class Input extends React.Component<InputProps, any> {
   renderClearIcon(prefixCls: string) {
     const { allowClear } = this.props;
     const { value } = this.state;
-    if (!allowClear || value === undefined || value === '') {
+    if (!allowClear || value === undefined || value === null || value === '') {
       return null;
     }
     return (

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

@@ -95,6 +95,172 @@ exports[`Input allowClear should change type when click 2`] = `
 </Input>
 `;
 
+exports[`Input allowClear should not show icon if defaultValue is undefined, null or empty string 1`] = `
+<Input
+  allowClear={true}
+  defaultValue={null}
+  disabled={false}
+  type="text"
+>
+  <Consumer>
+    <span
+      className="ant-input-affix-wrapper"
+    >
+      <input
+        className="ant-input"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        style={null}
+        type="text"
+        value=""
+      />
+      <span
+        className="ant-input-suffix"
+      />
+    </span>
+  </Consumer>
+</Input>
+`;
+
+exports[`Input allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
+<Input
+  allowClear={true}
+  disabled={false}
+  type="text"
+>
+  <Consumer>
+    <span
+      className="ant-input-affix-wrapper"
+    >
+      <input
+        className="ant-input"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        style={null}
+        type="text"
+        value=""
+      />
+      <span
+        className="ant-input-suffix"
+      />
+    </span>
+  </Consumer>
+</Input>
+`;
+
+exports[`Input allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
+<Input
+  allowClear={true}
+  defaultValue=""
+  disabled={false}
+  type="text"
+>
+  <Consumer>
+    <span
+      className="ant-input-affix-wrapper"
+    >
+      <input
+        className="ant-input"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        style={null}
+        type="text"
+        value=""
+      />
+      <span
+        className="ant-input-suffix"
+      />
+    </span>
+  </Consumer>
+</Input>
+`;
+
+exports[`Input allowClear should not show icon if value is undefined, null or empty string 1`] = `
+<Input
+  allowClear={true}
+  disabled={false}
+  type="text"
+  value={null}
+>
+  <Consumer>
+    <span
+      className="ant-input-affix-wrapper"
+    >
+      <input
+        className="ant-input"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        style={null}
+        type="text"
+        value=""
+      />
+      <span
+        className="ant-input-suffix"
+      />
+    </span>
+  </Consumer>
+</Input>
+`;
+
+exports[`Input allowClear should not show icon if value is undefined, null or empty string 2`] = `
+<Input
+  allowClear={true}
+  disabled={false}
+  type="text"
+>
+  <Consumer>
+    <span
+      className="ant-input-affix-wrapper"
+    >
+      <input
+        className="ant-input"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        style={null}
+        type="text"
+        value=""
+      />
+      <span
+        className="ant-input-suffix"
+      />
+    </span>
+  </Consumer>
+</Input>
+`;
+
+exports[`Input allowClear should not show icon if value is undefined, null or empty string 3`] = `
+<Input
+  allowClear={true}
+  disabled={false}
+  type="text"
+  value=""
+>
+  <Consumer>
+    <span
+      className="ant-input-affix-wrapper"
+    >
+      <input
+        className="ant-input"
+        disabled={false}
+        onChange={[Function]}
+        onKeyDown={[Function]}
+        style={null}
+        type="text"
+        value=""
+      />
+      <span
+        className="ant-input-suffix"
+      />
+    </span>
+  </Consumer>
+</Input>
+`;
+
 exports[`Input should support maxLength 1`] = `
 <Input
   disabled={false}

components/input/__tests__/index.test.js

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { mount } from 'enzyme';
-import Input from '..';
+
 import Form from '../../form';
+import Input from '..';
 import focusTest from '../../../tests/shared/focusTest';
 
 const { TextArea } = Input;
@@ -134,6 +136,26 @@ describe('Input allowClear', () => {
     expect(wrapper.find('input').getDOMNode().value).toEqual('');
   });
 
+  it('should not show icon if value is undefined, null or empty string', () => {
+    const wrappers = [null, undefined, ''].map(val => mount(<Input allowClear value={val} />));
+    wrappers.forEach(wrapper => {
+      expect(wrapper.find('input').getDOMNode().value).toEqual('');
+      expect(wrapper.find('.ant-input-clear-icon').exists()).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  it('should not show icon if defaultValue is undefined, null or empty string', () => {
+    const wrappers = [null, undefined, ''].map(val =>
+      mount(<Input allowClear defaultValue={val} />),
+    );
+    wrappers.forEach(wrapper => {
+      expect(wrapper.find('input').getDOMNode().value).toEqual('');
+      expect(wrapper.find('.ant-input-clear-icon').exists()).toEqual(false);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
   it('should trigger event correctly', () => {
     let argumentEventObject;
     let argumentEventObjectValue;