🐞 fix #1404 reset default values with useFieldArray (#1405)

* fix #1404 reset default values with useFieldArray * fix should render * fix an issue which missed during automation for remove * fix issue with array length check * remove dirty set within watch * remove debugger
react-hook-form · Apr 14, 2020 · 29d9203 · 29d9203
1 parent 4fcf717
commit 29d9203
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/cypress/integration/useFieldArray.ts b/cypress/integration/useFieldArray.ts
@@ -202,7 +202,7 @@ context('useFieldArray', () => {
     cy.get('#dirty').contains('yes');
   });
 
-  it.only('should display the correct dirty value without default value', () => {
+  it('should display the correct dirty value without default value', () => {
     cy.visit('http://localhost:3000/useFieldArray/normal');
     cy.get('#dirty').contains('no');
     cy.get('#append').click();

diff --git a/src/useFieldArray.ts b/src/useFieldArray.ts
@@ -55,15 +55,18 @@ export const useFieldArray = <
     fieldArrayDefaultValues,
     validateSchemaIsValid,
   } = control || methods.control;
-  const memoizedDefaultValues = React.useRef<Partial<FormArrayValues>[]>([
+  const getDefaultValues = () => [
     ...get(
       fieldArrayDefaultValues.current[getFieldArrayParentName(name)]
         ? fieldArrayDefaultValues.current
         : defaultValuesRef.current,
       name,
       [],
     ),
-  ]);
+  ];
+  const memoizedDefaultValues = React.useRef<Partial<FormArrayValues>[]>(
+    getDefaultValues(),
+  );
   const [fields, setField] = React.useState<
     Partial<ArrayField<FormArrayValues, KeyName>>[]
   >(mapIds(memoizedDefaultValues.current, keyName));
@@ -183,7 +186,7 @@ export const useFieldArray = <
       render = true;
     }
 
-    if (render) {
+    if (render && !isWatchAllRef.current) {
       reRender();
     }
   };
@@ -299,13 +302,19 @@ export const useFieldArray = <
 
     if (readFormStateRef.current.isValid && !validateSchemaIsValid) {
       let fieldIndex = -1;
+      let isFound = false;
+      const isIndexUndefined = isUndefined(index);
 
       while (fieldIndex++ < fields.length) {
         const isLast = fieldIndex === fields.length - 1;
         const isCurrentIndex =
           (isArray(index) ? index : [index]).indexOf(fieldIndex) >= 0;
 
-        if (!(isCurrentIndex || isIndexUndefined)) {
+        if (isCurrentIndex || isIndexUndefined) {
+          isFound = true;
+        }
+
+        if (!isFound) {
           continue;
         }
 
@@ -321,19 +330,16 @@ export const useFieldArray = <
             if (validFieldsRef.current.has(currentFieldName)) {
               validFieldsRef.current.add(previousFieldName);
             }
-
             if (fieldsWithValidationRef.current.has(currentFieldName)) {
               fieldsWithValidationRef.current.add(previousFieldName);
             }
           }
         }
       }
-
-      shouldRender = true;
     }
 
     modifyDirtyFields({
-      shouldRender: shouldRender && !isWatchAllRef.current,
+      shouldRender,
       isRemove: true,
       index,
     });
@@ -409,13 +415,15 @@ export const useFieldArray = <
 
   const reset = () => {
     resetFields();
+    memoizedDefaultValues.current = getDefaultValues();
     setField(mapIds(memoizedDefaultValues.current, keyName));
   };
 
   React.useEffect(() => {
     if (
       isNameKey &&
       isDeleted &&
+      fieldArrayDefaultValues.current[name] &&
       fields.length < fieldArrayDefaultValues.current[name].length
     ) {
       fieldArrayDefaultValues.current[name].pop();

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -762,10 +762,6 @@ export function useForm<
     );
     const watchFields = watchFieldsRef.current;
 
-    if (!isEmptyObject(combinedDefaultValues)) {
-      readFormStateRef.current.dirty = true;
-    }
-
     if (isString(fieldNames)) {
       return assignWatchFields<FormValues>(
         fieldValues,