fix(events): fix events not triggering

dagi12 · Nov 21, 2016 · e8707dc · e8707dc
1 parent 75278b6
commit e8707dc
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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: () => {},