👍 close #3712 stop watch trigger re-render with onBlur (#3716)

* close #3712 watch trigger re-render with onBlur * fix automation tests
react-hook-form · Dec 17, 2020 · c74dc0b · aaronjensen · Dec 17, 2020 · bluebill1049
1 parent 9fe58e8
commit c74dc0b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/cypress/integration/conditionalField.ts b/cypress/integration/conditionalField.ts
@@ -154,6 +154,6 @@ describe('ConditionalField', () => {
       }),
     );
 
-    cy.get('#renderCount').contains('36');
+    cy.get('#renderCount').contains('34');
   });
 });
diff --git a/cypress/integration/watchUseFieldArray.ts b/cypress/integration/watchUseFieldArray.ts
@@ -1,5 +1,5 @@
 describe('watchUseFieldArray', () => {
-  it('should behaviour correctly when watching the field array', () => {
+  it.only('should behaviour correctly when watching the field array', () => {
     cy.visit('http://localhost:3000/watch-field-array/normal');
 
     cy.get('#append').click();
@@ -9,38 +9,38 @@ describe('watchUseFieldArray', () => {
     cy.get('#result').contains('[{"name":"2test"}]');
 
     cy.get('#prepend').click();
-    cy.get('#result').contains('[{"name":"9"},{"name":"2test"}]');
+    cy.get('#result').contains('[{"name":"8"},{"name":"2test"}]');
 
     cy.get('#append').click();
     cy.get('#append').click();
     cy.get('#append').click();
     cy.get('#result').contains(
-      '[{"name":"9"},{"name":"2test"},{"name":"12"},{"name":"15"},{"name":"18"}]',
+      '[{"name":"8"},{"name":"2test"},{"name":"10"},{"name":"12"},{"name":"14"}]',
     );
 
     cy.get('#swap').click();
     cy.get('#result').contains(
-      '[{"name":"9"},{"name":"12"},{"name":"2test"},{"name":"15"},{"name":"18"}]',
+      '[{"name":"8"},{"name":"10"},{"name":"2test"},{"name":"12"},{"name":"14"}]',
     );
 
     cy.get('#move').click();
     cy.get('#result').contains(
-      '[{"name":"2test"},{"name":"9"},{"name":"12"},{"name":"15"},{"name":"18"}]',
+      '[{"name":"2test"},{"name":"8"},{"name":"10"},{"name":"12"},{"name":"14"}]',
     );
 
     cy.get('#insert').click();
     cy.get('#result').contains(
-      '[{"name":"2test"},{"name":"25"},{"name":"9"},{"name":"12"},{"name":"15"},{"name":"18"}]',
+      '[{"name":"2test"},{"name":"20"},{"name":"8"},{"name":"10"},{"name":"12"},{"name":"14"}]',
     );
 
     cy.get('#remove').click();
     cy.get('#result').contains(
-      '[{"name":"2test"},{"name":"9"},{"name":"12"},{"name":"15"},{"name":"18"}]',
+      '[{"name":"2test"},{"name":"8"},{"name":"10"},{"name":"12"},{"name":"14"}]',
     );
 
     cy.get('#removeAll').click();
     cy.get('#result').contains('[]');
-    cy.get('#renderCount').contains('32');
+    cy.get('#renderCount').contains('26');
   });
 
   it('should return empty when items been removed and defaultValues are supplied', () => {

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -559,7 +559,7 @@ export function useForm<
           let state = updateAndGetDirtyState(name, false);
           let shouldRender =
             !isEmptyObject(state) ||
-            isFieldWatched(name as FieldName<TFieldValues>);
+            (!isBlurEvent && isFieldWatched(name as FieldName<TFieldValues>));
 
           if (
             isBlurEvent &&
@@ -582,7 +582,7 @@ export function useForm<
           }
 
           if (shouldSkipValidation) {
-            renderWatchedInputs(name);
+            !isBlurEvent && renderWatchedInputs(name);
             return (
               (!isEmptyObject(state) ||
                 (shouldRender && isEmptyObject(state))) &&
@@ -633,7 +633,7 @@ export function useForm<
             )[name];
           }
 
-          renderWatchedInputs(name);
+          !isBlurEvent && renderWatchedInputs(name);
           shouldRenderBaseOnError(name, error, shouldRender, state, isValid);
         }
       };