Merge pull request #23919 from rezkiy37/fix/23818-polish-rooms-clear-…

…states Fix/23818 - Polish admins-only policy room - Clear "Form's" states correctly
Expensify · Aug 2, 2023 · 6a38341 · 6a38341
2 parents 6509b07 + 0e8dba3
commit 6a38341
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/src/components/Form.js b/src/components/Form.js
@@ -346,24 +346,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],
@@ -435,6 +417,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 (
         <SafeAreaConsumer>
             {({safeAreaPaddingBottomStyle}) =>