@novin-dev/formalite/dist/esm/components/Formalite/elements/ErrorFocus.js

Generate MUI form with few line of code

import { useEffect } from 'react';
import { useFormikContext } from 'formik';

var getElement = function (_a) {
    var keys = _a.keys, errors = _a.errors;
    var errorElement;
    if (keys.length && Array.isArray(errors[keys[0]])) {
        var newKey = "";
        for (var i = 0; i < errors[keys[0]].length; i += 1) {
            try {
                newKey = "".concat(keys[0].toString(), ".").concat(i, ".").concat(Object.keys(errors[keys[0]][i])[0]);
                break;
            }
            catch (e) {
                // continue regardless of error
            }
        }
        errorElement =
            document.querySelector("input[name=\"".concat(newKey, "\"]")) ||
                document.querySelector("textarea[name=\"".concat(newKey, "\"]")) ||
                document.querySelector("#formalite div[id=\"".concat(newKey, "\"]"));
    }
    else {
        errorElement =
            document.querySelector("input[name=\"".concat(keys[0].toString(), "\"]")) ||
                document.querySelector("textarea[name=\"".concat(keys[0].toString(), "\"]")) ||
                document.querySelector("#formalite div[id=\"".concat(keys[0].toString(), "\"]"));
    }
    return errorElement;
};
var ErrorFocus = function (props) {
    // Get the context for the Formik form this component is rendered into.
    var _a = useFormikContext(), isSubmitting = _a.isSubmitting, isValidating = _a.isValidating, errors = _a.errors;
    useEffect(function () {
        // Get all keys of the error messages.
        var keys = Object.keys(errors);
        // Whenever there are errors and the form is submitting but finished validating.
        // replace !isValidating with isValidating5
        if (keys.length > 0 && isSubmitting && isValidating) {
            // We grab the first input element that error by its name.
            var errorElement = getElement({ keys: keys, errors: errors });
            if (errorElement) {
                var offsetPosition = errorElement.getBoundingClientRect().top +
                    window.pageYOffset -
                    props.offsetScroll;
                // When there is an input, scroll this input into view.
                // console.log(offsetPosition);
                if (props.scrollReferenceId) {
                    document.getElementById(props.scrollReferenceId).scrollTo({
                        top: offsetPosition +
                            document.getElementById(props.scrollReferenceId).scrollTop,
                        behavior: "smooth",
                    });
                }
                else {
                    window.scrollTo({
                        top: offsetPosition,
                        behavior: "smooth",
                    });
                }
                // errorElement.scrollIntoView({ behavior: "smooth" });
            }
        }
    }, [isSubmitting, isValidating, errors, props.offsetScroll]);
    // This component does not render anything by itself.
    return null;
};

export { ErrorFocus as default };
//# sourceMappingURL=ErrorFocus.js.map