diff --git a/src/components/Form.js b/src/components/Form.js index bfd75a020b32..cbf354fe4a5b 100644 --- a/src/components/Form.js +++ b/src/components/Form.js @@ -343,24 +343,6 @@ function Form(props) { }); }); - // We need to verify that all references and values are still actual. - // We should not store it when e.g. some input has been unmounted - _.each(inputRefs.current, (inputRef, inputID) => { - if (inputRef) { - return; - } - - delete inputRefs.current[inputID]; - - setInputValues((prevState) => { - const copyPrevState = _.clone(prevState); - - delete copyPrevState[inputID]; - - return copyPrevState; - }); - }); - return childrenElements; }, [errors, inputRefs, inputValues, onValidate, props.draftValues, props.formID, props.formState, setTouchedInput], @@ -432,6 +414,29 @@ function Form(props) { ], ); + useEffect(() => { + _.each(inputRefs.current, (inputRef, inputID) => { + if (inputRef) { + return; + } + + delete inputRefs.current[inputID]; + delete touchedInputs.current[inputID]; + delete lastValidatedValues.current[inputID]; + + setInputValues((prevState) => { + const copyPrevState = _.clone(prevState); + + delete copyPrevState[inputID]; + + return copyPrevState; + }); + }); + // We need to verify that all references and values are still actual. + // We should not store it when e.g. some input has been unmounted. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [children]); + return ( {({safeAreaPaddingBottomStyle}) =>