Traverse key list backwards to fix array removal bug

Author: CodeStix

Todo.md

@@ -3,3 +3,4 @@
 -   Split package in `typed-react-form-yup-validator`, `typed-react-form-elements`? Reduces size.
 -   Nested validators in child forms to improve validation performance
 -   Typed FormInput type prop
+-   Combine array helpers into one object? This is usefull to pass to other components

example/src/App.tsx

@@ -82,7 +82,12 @@ const initialValues: ExampleFormData = {
 };
 
 const TodoListSchema = yup.object({
-    name: yup.string().required("Enter a name").min(5, "Enter a longer name")
+    name: yup.string().required("Enter a name").min(5, "Enter a longer name"),
+    todos: yup.array().of(
+        yup.object({
+            message: yup.string().required("Enter a todo")
+        })
+    )
 });
 
 export function Form() {
@@ -169,6 +174,7 @@ export function Form() {
                             { form, swap, remove, append, values, setValues } // <- Make sure to use the newly passed form (otherwise type checking will not work!)
                         ) => (
                             <VisualRender>
+                                <pre>{form.values.length}</pre>
                                 <ul>
                                     {form.values.map((
                                         _,

src/form.ts

@@ -249,7 +249,8 @@ export class FormState<T, State = DefaultState, Error = DefaultError> {
         let newKeys = Object.keys(isDefault ? this.defaultValues : this.values);
         let localKeys = Object.keys(values);
         let mostKeys = newKeys.length > localKeys.length ? newKeys : localKeys;
-        for (let i = 0; i < mostKeys.length; i++) {
+        // Traverse backwards, so when removing array items, the whole array gets shifted in the right direction
+        for (let i = mostKeys.length - 1; i >= 0; i--) {
             let key = mostKeys[i] as keyof T;
             this.setValue(
                 key,

src/hooks.ts

@@ -55,15 +55,14 @@ export function useChildForm<T, State, Error, Key extends keyof T>(parentForm: F
         c.current!.name = name;
 
         // First, set new default values, without validating
-        c.current!.setValues(parentForm.defaultValues[name] ?? ({} as any), false, true, true, true);
+        c.current!.setValues(parentForm.defaultValues[name] ?? ({} as any), false, true, true, false);
         // Then, set new values and validate if needed
         c.current!.setValues(parentForm.values[name] ?? ({} as any), c.current!.validateOnMount, false, true, true);
 
         return () => {
-            // Only clear value/error if the set form in the childMap is not already overriden
+            // Only clear if is not already overwritten
             if (parentForm.childMap[name] === c.current!) {
-                parentForm.setError(name, undefined);
-                parentForm.setValueInternal(name, undefined, false, false);
+                delete parentForm.childMap[name];
             }
         };
     }, [parentForm, name]);