diff --git a/__tests__/Formsy.spec.tsx b/__tests__/Formsy.spec.tsx index d34c0c2c..176d5956 100755 --- a/__tests__/Formsy.spec.tsx +++ b/__tests__/Formsy.spec.tsx @@ -1,6 +1,7 @@ /* eslint-disable max-classes-per-file, react/destructuring-assignment */ import { mount } from 'enzyme'; import * as React from 'react'; +import { useState } from 'react'; import DynamicInputForm from '../__test_utils__/DynamicInputForm'; import { getFormInstance, getWrapperInstance } from '../__test_utils__/getInput'; @@ -971,6 +972,58 @@ describe('form valid state', () => { expect(isValid).toEqual(true); }); + + it('should revalidate form when input added dynamically', () => { + let isValid = false; + const Inputs = () => { + const [counter, setCounter] = useState(1); + + return ( + <> + + {Array.from(Array(counter)).map((_, index) => ( + + ))} + + ); + }; + + const TestForm = () => { + return ( + (isValid = false)} onValid={() => (isValid = true)}> + + + ); + }; + jest.useFakeTimers(); + const form = mount(); + const plusButton = form.find('#add'); + jest.runAllTimers(); + + expect(isValid).toBe(true); + + plusButton.simulate('click'); + + expect(isValid).toBe(false); + }); + + it('should revalidate form once when mounting multiple inputs', () => { + const validSpy = jest.fn(); + const TestForm = () => ( + + // onValid is called each time the form revalidates + {Array.from(Array(5)).map((_, index) => ( + + ))} + + ); + + mount(); + + expect(validSpy).toHaveBeenCalledTimes(1 + 1); // one for form mount & 1 for all attachToForm calls + }); }); describe('onSubmit/onValidSubmit/onInvalidSubmit', () => { diff --git a/src/Formsy.ts b/src/Formsy.ts index ff90d8e9..fb0eb409 100644 --- a/src/Formsy.ts +++ b/src/Formsy.ts @@ -14,7 +14,7 @@ import { IUpdateInputsWithValue, ValidationError, } from './interfaces'; -import { isObject, isString } from './utils'; +import { throttle, isObject, isString } from './utils'; import * as utils from './utils'; import validationRules from './validationRules'; import { PassDownProps } from './withFormsy'; @@ -52,6 +52,8 @@ export interface FormsyState { isValid: boolean; } +const ONE_RENDER_FRAME = 66; + export class Formsy extends React.Component { public inputs: InstanceType>[]; @@ -91,6 +93,8 @@ export class Formsy extends React.Component { validationErrors: {}, }; + private readonly throttledValidateForm: () => void; + public constructor(props: FormsyProps) { super(props); this.state = { @@ -108,6 +112,7 @@ export class Formsy extends React.Component { }; this.inputs = []; this.emptyArray = []; + this.throttledValidateForm = throttle(this.validateForm, ONE_RENDER_FRAME); } public componentDidMount = () => { @@ -320,6 +325,9 @@ export class Formsy extends React.Component { if (canChange) { onChange(this.getModel(), this.isChanged()); } + + // Will be triggered immediately & every one frame rate + this.throttledValidateForm(); }; // Method put on each input component to unregister diff --git a/src/utils.ts b/src/utils.ts index f7cc4301..a32175a6 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -142,3 +142,15 @@ export function runRules( return results; } + +export function throttle(callback, interval) { + let enableCall = true; + + return function (...args) { + if (!enableCall) return; + + enableCall = false; + callback.apply(this, args); + setTimeout(() => (enableCall = true), interval); + }; +}