Allow to set name to find error in the right form element

Author: rvsia

packages/form-state-manager/demo/index.tsx

@@ -16,7 +16,7 @@ const App = () => {
       <FormStateManager onSubmit={console.log}>
         {({ handleSubmit, ...state }) => {
           return (
-            <form onSubmit={handleSubmit}>
+            <form onSubmit={handleSubmit} name="field-2">
               <h1>There will be children</h1>
               <TextField initialValue="foo" autocomplete="off" validate={asyncValidator} label="Field 2" name="field-2-23" id="field-2" type="text" />
               <TextField autocomplete="off" validate={asyncValidator} label="Field 2" name="field-2" id="field-2" type="text" />

packages/form-state-manager/src/tests/utils/focus-error.test.js

@@ -18,4 +18,31 @@ describe('focusError', () => {
 
     expect(listener).toHaveBeenCalled();
   });
+
+  it('focus first error element in the right form', async () => {
+    document.body.innerHTML = `<form name="not-error">
+        <input name="field-1" />
+        <input id="not-error" name="this-has-error" />
+        <input name="field-3" />
+    </form>
+    <form name="this-has-error">
+        <input name="field-1" />
+        <input id="this-has-error" name="this-has-error" />
+        <input name="field-3" />
+    </form>`;
+
+    const listenerNotError = jest.fn();
+    const listenerError = jest.fn();
+
+    document.querySelector('#not-error').addEventListener('focus', listenerNotError);
+    document.querySelector('#this-has-error').addEventListener('focus', listenerError);
+
+    expect(listenerNotError).not.toHaveBeenCalled();
+    expect(listenerError).not.toHaveBeenCalled();
+
+    focusError({ 'field-3': 'error', 'this-has-error': 'error' }, 'this-has-error');
+
+    expect(listenerNotError).not.toHaveBeenCalled();
+    expect(listenerError).toHaveBeenCalled();
+  });
 });

packages/form-state-manager/src/tests/utils/manager-api.test.js

@@ -595,7 +595,7 @@ describe('managerApi', () => {
 
   it('onsubmit receives an error', () => {
     const focusErrorSpy = jest.spyOn(focusError, 'default');
-    const error = 'some-error';
+    const error = { field: 'some-error' };
     const onSubmit = jest.fn().mockImplementation(() => error);
     const managerApi = createManagerApi({ onSubmit });
     const { registerField } = managerApi();
@@ -615,7 +615,23 @@ describe('managerApi', () => {
     expect(managerApi().submitErrors).toEqual(error);
     expect(managerApi().hasSubmitErrors).toEqual(true);
     expect(managerApi().hasValidationErrors).toEqual(false);
-    expect(focusErrorSpy).toHaveBeenCalled();
+    expect(focusErrorSpy).toHaveBeenCalledWith({ field: 'some-error' }, undefined);
+  });
+
+  it('onsubmit receives an error - named form', () => {
+    const name = 'i-am-form';
+    const focusErrorSpy = jest.spyOn(focusError, 'default');
+    const error = { field: 'some-error' };
+    const onSubmit = jest.fn().mockImplementation(() => error);
+    const managerApi = createManagerApi({ onSubmit, name });
+    const { registerField } = managerApi();
+
+    const render = jest.fn();
+    registerField({ name: 'field', render });
+
+    managerApi().handleSubmit();
+
+    expect(focusErrorSpy).toHaveBeenCalledWith({ field: 'some-error' }, name);
   });
 
   it('onsubmit receives an error - form level', () => {
@@ -2084,7 +2100,7 @@ describe('managerApi', () => {
       expect(managerApi().submitSucceeded).toEqual(false);
       expect(managerApi().submitErrors).toEqual(error);
       expect(managerApi().hasSubmitErrors).toEqual(true);
-      expect(focusErrorSpy).toHaveBeenCalled();
+      expect(focusErrorSpy).toHaveBeenCalledWith({ 'nested.field': 'some evil error' }, undefined);
 
       expect(managerApi().getFieldState('nested.field').submitError).toEqual('some evil error');
       expect(managerApi().getFieldState('nested.field').submitting).toEqual(false);
@@ -2212,12 +2228,28 @@ describe('managerApi', () => {
 
       managerApi().handleSubmit();
 
-      expect(focusErrorSpy).toHaveBeenCalled();
+      expect(focusErrorSpy).toHaveBeenCalledWith({ field: 'error' }, undefined);
       expect(managerApi().getFieldState('field').touched).toEqual(true);
       expect(managerApi().getFieldState('field').touched).toEqual(true);
 
       expect(onSubmit).not.toHaveBeenCalled();
     });
+
+    it('should not call submit action when invalid + all fields are touched - named field', () => {
+      const onSubmit = jest.fn();
+      const name = 'form-name';
+
+      const managerApi = createManagerApi({ onSubmit, name });
+
+      managerApi().registerField({ name: 'field', validate: () => 'error', render: jest.fn(), internalId: 1 });
+      managerApi().registerField({ name: 'field2', render: jest.fn(), internalId: 1 });
+
+      expect(focusErrorSpy).not.toHaveBeenCalled();
+
+      managerApi().handleSubmit();
+
+      expect(focusErrorSpy).toHaveBeenCalledWith({ field: 'error' }, name);
+    });
   });
 
   it('set form dirty and pristine according to fields', () => {

packages/form-state-manager/src/types/manager-api.d.ts

@@ -201,6 +201,7 @@ export interface CreateManagerApiConfig {
   debug?: Debug;
   keepDirtyOnReinitialize?: boolean;
   destroyOnUnregister?: boolean;
+  name?: string;
 }
 
 declare type CreateManagerApi = (CreateManagerApiConfig: CreateManagerApiConfig) => ManagerApi;

packages/form-state-manager/src/utils/focus-error.ts

@@ -1,10 +1,16 @@
 import AnyObject from '../types/any-object';
 
-const focusError = (errors: AnyObject) => {
+const justFocusable = (el: any) => el?.focus;
+
+const focusError = (errors: AnyObject, name?: string): void => {
   if (document) {
-    const allInputs = Array.from(document.forms)
-      .reduce((acc: any, curr: any) => [...acc, ...curr.elements], [])
-      .filter((el: HTMLElement) => el.focus);
+    const formInputs = name && document.forms[name as any]?.elements;
+
+    const allInputs = formInputs
+      ? Array.from(formInputs).filter(justFocusable)
+      : Array.from(document.forms)
+          .reduce((acc: any, curr: any) => [...acc, ...curr.elements], [])
+          .filter(justFocusable);
 
     const errorKeys = Object.keys(errors);
 

packages/form-state-manager/src/utils/manager-api.ts

@@ -194,7 +194,8 @@ const createManagerApi: CreateManagerApi = ({
   initialValues,
   debug,
   keepDirtyOnReinitialize,
-  destroyOnUnregister
+  destroyOnUnregister,
+  name
 }) => {
   const config: CreateManagerApiConfig = {
     onSubmit,
@@ -204,7 +205,8 @@ const createManagerApi: CreateManagerApi = ({
     subscription,
     debug,
     keepDirtyOnReinitialize,
-    destroyOnUnregister
+    destroyOnUnregister,
+    name
   };
 
   let state: ManagerState = {
@@ -265,8 +267,8 @@ const createManagerApi: CreateManagerApi = ({
 
   const managerApi: ManagerApi = () => state;
 
-  function setConfig(attribute: keyof CreateManagerApiConfig, value: any) {
-    config[attribute] = value;
+  function setConfig(attribute: keyof CreateManagerApiConfig, value: CreateManagerApiConfig[keyof CreateManagerApiConfig]) {
+    (config as AnyObject)[attribute] = value;
   }
 
   function isValidationPaused() {
@@ -612,7 +614,7 @@ const createManagerApi: CreateManagerApi = ({
         }));
       });
 
-      focusError(state.errors);
+      focusError(state.errors, config.name);
 
       return;
     }
@@ -639,7 +641,7 @@ const createManagerApi: CreateManagerApi = ({
           handleSubmitError(errors);
           updateFieldSubmitMeta();
           render();
-          focusError(flatSubmitErrors);
+          focusError(flatSubmitErrors, config.name);
 
           runAfterSubmit();
         })
@@ -656,7 +658,7 @@ const createManagerApi: CreateManagerApi = ({
 
       render();
 
-      focusError(flatSubmitErrors);
+      focusError(flatSubmitErrors, config.name);
 
       runAfterSubmit();
     }