formik-top-error-focus

A simple dependency-less other than react and formik React component that automatically scrolls to the top-most visible formik error.
I tried to use the existing ones from NPM however none of them seemed to work for me out of the box. So I decided to publish this tiny(2.68 KB before gzip) module instead.

* Install.

1yarn add formik-top-error-focus

or

1npm install formik-top-error-focus

* Props

In my opinion, the defaults should fit most usage needs.
However for your convenience I added some customize ability through the use of props:

1interface IFormikErrorScrollToTopProps {
2    /**
3     * The offset above the scrolled to element, to add even more scroll
4     * Default : 130px
5     */
6    topElementOffset: number;
7    /**
8     * allows the user of the code to ovveride with their own error choosing logic,
9     * Default: gets highest visible error element.
10     * @param errors
11     */
12    getElement: (...errors: string[]) => HTMLElement;
13    /**
14     * What to do with the element?
15     * default action is to just element.focus()
16     * @param element
17     */
18    onFocusedElement: (element: HTMLElement) => void;
19    /**
20     * The delay used before the logic is activated, to scroll not instantly.
21     * Default: 500 ms
22     */
23    onFocusedDelay: number;
24    /**
25     * On what condition to trigger the scroll logic?
26     * Default: isSubmitting && !isValidating
27     * @param errors
28     * @param isSubmitting
29     * @param isValidating
30     */
31    validationTriggerCondition: (errors: any, isSubmitting: boolean, isValidating: boolean) => boolean;
32
33}

* Usage Example in your formik form by adding '' shown below

1import * as React from 'react';
2import FormikErrorScrollToTop from 'formik-top-error-focus';
3
4const formikExampleForm = (props) => {
5    return (
6        <Formik
7            initialValues={{
8                a: undefined,
9                b: undefined,
10                c: undefined,
11            }}
12            validationSchema={
13                Yup.object({
14                    a: Yup.string()
15                        .max(15, 'Must be 15 characters or less')
16                        .required('Required'),
17                    b: Yup.string()
18                        .max(20, 'Must be 20 characters or less')
19                        .required('Required'),
20                    c: Yup.string().email('Invalid email address').required('Required'),
21                })
22            }
23            onSubmit={async (values, {setSubmitting}) => {
24                setSubmitting(false);
25            }}
26            initialTouched={objectArrayTools(props.ticketDetails).map(() => true).toNormalObject()}
27        >
28            {({submitForm, isSubmitting, setFieldValue, values, touched, errors, submitCount}) => (
29                <Form translate={null}>
30                    <Field name="a" type="text"/>
31                    <Field name="b" type="text"/>
32                    <Field name="c" type="text"/>
33                    <Button
34                        className="nextButton"
35                        variant="contained"
36                        color="primary"
37                        disabled={isSubmitting}
38                        onClick={submitForm}
39                        ref={props.setSubmitRef}
40                    >
41                        submit
42                    </Button>
43                    <FormikErrorScrollToTop/>
44                </Form>
45            )}
46        </Formik>
47    );
48};
49
50export default formikExampleForm;
51

Thank you for giving me a chance, Feel free to contribute and fix.

And most important of all, Enjoy!