diff --git a/docs/examples/AlertInputExample.jsx b/docs/examples/AlertInputExample.jsx index 6906bb3a0..5564cfc52 100644 --- a/docs/examples/AlertInputExample.jsx +++ b/docs/examples/AlertInputExample.jsx @@ -106,6 +106,9 @@ const exampleProps = { }, { propType: 'onBlur', type: 'func', + }, { + propType: 'onFocus', + type: 'func', }, { propType: 'type', type: "oneOf: 'text', 'number'", diff --git a/src/components/adslot-ui/AlertInput/index.jsx b/src/components/adslot-ui/AlertInput/index.jsx index f20d5896a..69f956686 100644 --- a/src/components/adslot-ui/AlertInput/index.jsx +++ b/src/components/adslot-ui/AlertInput/index.jsx @@ -46,6 +46,10 @@ export default class AlertInput extends Component { isFocused: true, isPopoverVisible: Boolean(this.props.alertMessage), }); + + if (this.props.onFocus) { + this.props.onFocus(event); + } } handleInputBlur(event) { @@ -127,6 +131,7 @@ AlertInput.propTypes = { alertMessage: PropTypes.string, onValueChange: PropTypes.func, onBlur: PropTypes.func, + onFocus: PropTypes.func, }; AlertInput.defaultProps = { diff --git a/src/components/adslot-ui/AlertInput/index.spec.jsx b/src/components/adslot-ui/AlertInput/index.spec.jsx index cfa2d8b91..7e7f2a06e 100644 --- a/src/components/adslot-ui/AlertInput/index.spec.jsx +++ b/src/components/adslot-ui/AlertInput/index.spec.jsx @@ -70,6 +70,26 @@ describe('AlertInput', () => { }); expect(focusEvent.target.select.callCount).to.equal(1); }); + + it('should call prop `onFocus` if exists', () => { + const onFocusSpy = sinon.spy(); + const focusEvent = { + target: { + select: sinon.spy(), + }, + }; + const component = shallow(); + const inputElement = component.find('.alert-input-component-input'); + + inputElement.simulate('focus', focusEvent); + + expect(component.state()).to.eql({ + isFocused: true, + isPopoverVisible: false, + }); + expect(focusEvent.target.select.callCount).to.equal(1); + expect(onFocusSpy.callCount).to.equal(1); + }); }); describe('handleInputBlur ()', () => {