mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

Browse Source 
* fixed issue with allowClear if value is null

* added test cases for allowClear fix
This commit is contained in:
thilo-behnke 2019-02-07 04:39:16 +01:00 committed by zombieJ
parent 5ad97a33d1
commit a9a6da47ed
3 changed files with 190 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/input/Input.tsx
View File

@ -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 (

166
components/input/__tests__/__snapshots__/index.test.js.snap
View File

@ -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}

24
components/input/__tests__/index.test.js
View File

@ -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;