feat(manager): focus on error input

Author: rvsia

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

@@ -2,10 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import FormStateManager from '../src/files/form-state-manager';
+import FormSpy from '../src/files/form-spy';
+
 import TextField from '../src/tests/helpers/text-field';
 import { Validator } from '../src/types/validate';
 
-const asyncValidator: Validator = (value) => new Promise((res, rej) => setTimeout(() => (value === 'foo' ? rej('No async foo') : res()), 250));
+const asyncValidator: Validator = (value) => new Promise((res, rej) => setTimeout(() => (value === 'foo' ? rej('No async foo') : res()), 1000));
+const asyncValidator1: Validator = (value) => new Promise((res, rej) => setTimeout(() => (value === 'foo' ? rej('No async foo') : res()), 3000));
 
 const App = () => {
   return (
@@ -15,14 +18,22 @@ const App = () => {
           return (
             <form onSubmit={handleSubmit}>
               <h1>There will be children</h1>
-              <TextField
-                validate={(value) => (value === 'foo' ? 'no-foo-allowed' : undefined)}
-                label="Field 1"
-                name="nested.field-1"
-                id="field-1"
-                type="text"
-              />
-              <TextField validate={asyncValidator} label="Field 2" name="field-2" id="field-2" type="text" />
+              <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" />
+              <FormSpy>
+                {(props) => (
+                  <pre>
+                    {JSON.stringify(
+                      {
+                        validate: props.valid,
+                        validating: props.validating
+                      },
+                      null,
+                      2
+                    )}
+                  </pre>
+                )}
+              </FormSpy>
               <div style={{ margin: 16 }}>
                 <button type="submit">Submit</button>
               </div>

packages/form-state-manager/src/tests/helpers/text-field.tsx

@@ -10,14 +10,15 @@ export interface TextFieldProps {
 const TextField: React.ComponentType<React.HTMLProps<HTMLInputElement> & TextFieldProps & UseFieldConfig> = ({ label, id, ...props }) => {
   const {
     input,
-    meta: { valid, error },
+    meta: { valid, error, validating, touched },
     ...rest
   } = useField(props);
   return (
     <div style={{ display: 'flex', flexDirection: 'column', margin: 16 }}>
       <label htmlFor={id}>{label}</label>
       <input id={id} {...input} {...rest} />
-      {!valid && <p style={{ color: 'red' }}>{error}</p>}
+      {validating && <div>I am being validated</div>}
+      {touched && <p style={{ color: 'red' }}>{error}</p>}
     </div>
   );
 };

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

@@ -0,0 +1,21 @@
+import focusError from '../../utils/focus-error';
+
+describe('focusError', () => {
+  it('focus first error element', async () => {
+    document.body.innerHTML = `<form name="foo">
+        <input name="field-1" />
+        <input name="field-2" />
+        <input name="field-3" />
+    </form>`;
+
+    const listener = jest.fn();
+
+    document.querySelector('[name="field-2"]').addEventListener('focus', listener);
+
+    expect(listener).not.toHaveBeenCalled();
+
+    focusError({ 'field-3': 'error', 'field-2': 'error' });
+
+    expect(listener).toHaveBeenCalled();
+  });
+});

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

@@ -1,7 +1,18 @@
 import createManagerApi, { initialMeta, flatObject } from '../../utils/manager-api';
 import FORM_ERROR from '../../files/form-error';
+import * as focusError from '../../utils/focus-error';
 
 describe('managerApi', () => {
+  let focusErrorSpy;
+
+  beforeEach(() => {
+    focusErrorSpy = jest.spyOn(focusError, 'default');
+  });
+
+  afterEach(() => {
+    focusErrorSpy.mockClear();
+  });
+
   it('should create managerApi getter', () => {
     const managerApi = createManagerApi({});
     expect(managerApi).toEqual(expect.any(Function));
@@ -583,6 +594,7 @@ describe('managerApi', () => {
   });
 
   it('onsubmit receives an error', () => {
+    const focusErrorSpy = jest.spyOn(focusError, 'default');
     const error = 'some-error';
     const onSubmit = jest.fn().mockImplementation(() => error);
     const managerApi = createManagerApi({ onSubmit });
@@ -603,6 +615,7 @@ describe('managerApi', () => {
     expect(managerApi().submitErrors).toEqual(error);
     expect(managerApi().hasSubmitErrors).toEqual(true);
     expect(managerApi().hasValidationErrors).toEqual(false);
+    expect(focusErrorSpy).toHaveBeenCalled();
   });
 
   it('onsubmit receives an error - form level', () => {
@@ -2071,6 +2084,7 @@ describe('managerApi', () => {
       expect(managerApi().submitSucceeded).toEqual(false);
       expect(managerApi().submitErrors).toEqual(error);
       expect(managerApi().hasSubmitErrors).toEqual(true);
+      expect(focusErrorSpy).toHaveBeenCalled();
 
       expect(managerApi().getFieldState('nested.field').submitError).toEqual('some evil error');
       expect(managerApi().getFieldState('nested.field').submitting).toEqual(false);
@@ -2194,9 +2208,11 @@ describe('managerApi', () => {
 
       expect(managerApi().getFieldState('field').touched).toEqual(false);
       expect(managerApi().getFieldState('field').touched).toEqual(false);
+      expect(focusErrorSpy).not.toHaveBeenCalled();
 
       managerApi().handleSubmit();
 
+      expect(focusErrorSpy).toHaveBeenCalled();
       expect(managerApi().getFieldState('field').touched).toEqual(true);
       expect(managerApi().getFieldState('field').touched).toEqual(true);
 

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

@@ -0,0 +1,17 @@
+import AnyObject from '../types/any-object';
+
+const focusError = (errors: AnyObject) => {
+  if (document) {
+    const allInputs = Array.from(document.forms)
+      .reduce((acc: any, curr: any) => [...acc, ...curr.elements], [])
+      .filter((el: HTMLElement) => el.focus);
+
+    const errorKeys = Object.keys(errors);
+
+    const firstError = allInputs.find((inp) => errorKeys.includes(inp.name));
+
+    firstError && firstError.focus();
+  }
+};
+
+export default focusError;

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

@@ -29,6 +29,7 @@ import { formLevelValidator, isPromise } from './validate';
 import { FormValidator, FormLevelError, Validator } from '../types/validate';
 import findDifference from './find-difference';
 import FORM_ERROR from '../files/form-error';
+import focusError from './focus-error';
 
 export const defaultIsEqual = (a: any, b: any) => a === b;
 
@@ -611,6 +612,8 @@ const createManagerApi: CreateManagerApi = ({
         }));
       });
 
+      focusError(state.errors);
+
       return;
     }
 
@@ -636,6 +639,7 @@ const createManagerApi: CreateManagerApi = ({
           handleSubmitError(errors);
           updateFieldSubmitMeta();
           render();
+          focusError(flatSubmitErrors);
 
           runAfterSubmit();
         })
@@ -652,6 +656,8 @@ const createManagerApi: CreateManagerApi = ({
 
       render();
 
+      focusError(flatSubmitErrors);
+
       runAfterSubmit();
     }
   }