diff --git a/__test__/AvBaseInput.spec.js b/__test__/AvBaseInput.spec.js index 10345ca..67b363c 100644 --- a/__test__/AvBaseInput.spec.js +++ b/__test__/AvBaseInput.spec.js @@ -373,16 +373,16 @@ describe('BaseInput', function () { expect(spy).to.have.been.calledWith('onInput'); }); - it('should call setTouched if the control was not previously touched', () => { - this.context.FormCtrl.isTouched[this.props.name] = false; + it('should call setDirty if the control was not previously dirty', () => { + this.context.FormCtrl.isDirty[this.props.name] = false; this.component.onInputHandler('something'); - expect(this.context.FormCtrl.setTouched).to.have.been.calledWith(this.props.name); + expect(this.context.FormCtrl.setDirty).to.have.been.calledWith(this.props.name); }); - it('should not call setTouched if the control was previously touched', () => { - this.context.FormCtrl.isTouched[this.props.name] = true; + it('should not call setDirty if the control was previously dirty', () => { + this.context.FormCtrl.isDirty[this.props.name] = true; this.component.onInputHandler('something'); - expect(this.context.FormCtrl.setTouched).to.not.have.been.called; + expect(this.context.FormCtrl.setDirty).to.not.have.been.called; }); }); @@ -451,7 +451,7 @@ describe('BaseInput', function () { expect(this.component.value).to.equal(event.target.value); }); - it('should call valitateEvent with the onInput event', () => { + it('should call valitateEvent with the onChange event', () => { const spy = sinon.spy(this.component, 'validateEvent'); this.component.onChangeHandler('something'); expect(spy).to.have.been.calledWith('onChange'); @@ -638,12 +638,12 @@ describe('BaseInput', function () { describe('get validation event', () => { it('should return the validation event pass via props if present', () => { this.props.validationEvent = 'myEvent'; - expect(this.component.getValidationEvent()).to.equal(this.props.validationEvent); + expect(this.component.getValidationEvent()).to.eql([this.props.validationEvent]); }); it('should return the validation event from the form control if not from props', () => { this.props.validationEvent = ''; - expect(this.component.getValidationEvent()).to.equal(this.context.FormCtrl.validationEvent); + expect(this.component.getValidationEvent()).to.eql([this.context.FormCtrl.validationEvent]); }); }); diff --git a/src/AvBaseInput.js b/src/AvBaseInput.js index 44dc33d..ca52418 100644 --- a/src/AvBaseInput.js +++ b/src/AvBaseInput.js @@ -11,8 +11,13 @@ const htmlValidationTypes = [ export default class AvBaseInput extends Component { static propTypes = { name: PropTypes.string.isRequired, - validationEvent: PropTypes.oneOf([ - '', 'onInput', 'onChange', 'onBlur', 'onFocus', + validationEvent: PropTypes.oneOfType([ + PropTypes.oneOf([ + '', 'onInput', 'onChange', 'onBlur', 'onFocus', + ]), + PropTypes.arrayOf(PropTypes.oneOf([ + 'onInput', 'onChange', 'onBlur', 'onFocus', + ])), ]), validate: PropTypes.object, value: PropTypes.any, @@ -101,7 +106,7 @@ export default class AvBaseInput extends Component { onInputHandler(_value) { this.value = this.getFieldValue(_value); this.validateEvent('onInput'); - !this.context.FormCtrl.isTouched[this.props.name] && this.context.FormCtrl.setTouched(this.props.name); + !this.context.FormCtrl.isDirty[this.props.name] && this.context.FormCtrl.setDirty(this.props.name); } onBlurHandler(_value) { @@ -148,9 +153,10 @@ export default class AvBaseInput extends Component { } getValidationEvent() { - return (this.props.validationEvent) + const validationEvent = this.props.validationEvent ? this.props.validationEvent : this.context.FormCtrl.validationEvent; + return Array.isArray(validationEvent) ? validationEvent : [validationEvent]; } getValidatorProps() { @@ -198,7 +204,7 @@ export default class AvBaseInput extends Component { } validateEvent(eventName) { - if (this.getValidationEvent() === eventName) { + if (this.getValidationEvent().includes(eventName)) { this.setState({value: this.value}); this.validate(); } diff --git a/src/AvForm.js b/src/AvForm.js index 6587126..ae1a9c1 100644 --- a/src/AvForm.js +++ b/src/AvForm.js @@ -40,8 +40,13 @@ export default class AvForm extends InputContainer { ]), onValidSubmit: PropTypes.func, onInvalidSubmit: PropTypes.func, - validationEvent: PropTypes.oneOf([ - 'onInput', 'onChange', 'onBlur', 'onFocus', + validationEvent: PropTypes.oneOfType([ + PropTypes.oneOf([ + 'onInput', 'onChange', 'onBlur', 'onFocus', + ]), + PropTypes.arrayOf(PropTypes.oneOf([ + 'onInput', 'onChange', 'onBlur', 'onFocus', + ])), ]), errorMessage: PropTypes.oneOfType([ PropTypes.object, @@ -53,7 +58,7 @@ export default class AvForm extends InputContainer { static defaultProps = { tag: Form, model: {}, - validationEvent: 'onChange', + validationEvent: ['onChange', 'onInput'], method: 'get', onSubmit: () => {}, onKeyDown: () => {},