diff --git a/components/input/Input.tsx b/components/input/Input.tsx index 23c674080d..7fac7eeeda 100644 --- a/components/input/Input.tsx +++ b/components/input/Input.tsx @@ -128,12 +128,23 @@ class Input extends React.Component { if (!('value' in this.props)) { this.setState({ value }); } - const newEvent = Object.create(e); - const eventTarget = this.input; - newEvent.target = eventTarget; - newEvent.currentTarget = eventTarget; + let event = e; + if (e.type === 'click') { // click clear icon + event = Object.create(e); + event.target = this.input; + event.currentTarget = this.input; + const originalInputValue = this.input.value; + // change input value cause e.target.value should be '' when clear input + this.input.value = ''; + if (onChange) { + onChange(event as React.ChangeEvent); + } + // reset input value + this.input.value = originalInputValue; + return; + } if (onChange) { - onChange(newEvent); + onChange(event as React.ChangeEvent); } } diff --git a/components/input/__tests__/index.test.js b/components/input/__tests__/index.test.js index 5c10e1483a..1baea72f92 100644 --- a/components/input/__tests__/index.test.js +++ b/components/input/__tests__/index.test.js @@ -133,4 +133,38 @@ describe('Input allowClear', () => { expect(wrapper).toMatchSnapshot(); expect(wrapper.find('input').getDOMNode().value).toEqual(''); }); + + it('should trigger event correctly', () => { + let argumentEventObject; + let argumentEventObjectValue; + const onChange = e => { + argumentEventObject = e; + argumentEventObjectValue = e.target.value; + }; + const wrapper = mount(); + wrapper + .find('.ant-input-clear-icon') + .at(0) + .simulate('click'); + expect(argumentEventObject.type).toBe('click'); + expect(argumentEventObjectValue).toBe(''); + expect(wrapper.find('input').at(0).getDOMNode().value).toBe(''); + }); + + it('should trigger event correctly on controlled mode', () => { + let argumentEventObject; + let argumentEventObjectValue; + const onChange = e => { + argumentEventObject = e; + argumentEventObjectValue = e.target.value; + }; + const wrapper = mount(); + wrapper + .find('.ant-input-clear-icon') + .at(0) + .simulate('click'); + expect(argumentEventObject.type).toBe('click'); + expect(argumentEventObjectValue).toBe(''); + expect(wrapper.find('input').at(0).getDOMNode().value).toBe('111'); + }); });