Fixes issue #3059 - scroll to first validation error on BaseForm

src/components/BaseForm.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { withTheme, FormProps } from "@rjsf/core";
 import { Theme as Bootstrap4Theme } from "@rjsf/bootstrap-4";
 import validator from "@rjsf/validator-ajv8";
-import { RJSFSchema } from "@rjsf/utils";
+import { RJSFSchema, RJSFValidationError } from "@rjsf/utils";
 
 import TagsField from "./TagsField";
 import Spinner from "./Spinner";
@@ -18,17 +18,29 @@ export type BaseFormProps = Omit<FormProps, "validator"> & {
 
 export default function BaseForm(props: BaseFormProps) {
   const [isSubmitting, setIsSubmitting] = useState(false);
+  const formRef = useRef(null);
   const { className, disabled, showSpinner, onSubmit, ...restProps } = props;
 
   const handleOnSubmit = form => {
     setIsSubmitting(true);
     onSubmit(form);
   };
 
+  const errorFocus = (err: RJSFValidationError) => {
+    if (err?.property !== ".") {
+      formRef.current
+        .querySelector(`[for="root${err.property.replace(/\./g, "_")}"]`)
+        .scrollIntoView({ behavior: "auto", block: "center" });
+    } else {
+      formRef.current.scrollIntoView({ behavior: "auto", block: "start" });
+    }
+  };
+
   return (
-    <div className="formWrapper">
+    <div className="formWrapper" ref={formRef} data-testid="formWrapper">
       <FormWithTheme
         {...restProps}
+        focusOnFirstError={errorFocus}
         className={`rjsf ${className ? className : ""}`}
         validator={validator}
         onSubmit={handleOnSubmit}

test/components/BaseForm_test.js

@@ -127,4 +127,49 @@ describe("BaseForm component", () => {
     expect(submit.disabled).toBe(true);
     expect(result.queryByTestId("spinner")).toBeDefined();
   });
+
+  it("Should scroll to the first property that fails validation", async () => {
+    const result = render(
+      <BaseForm
+        className="testClass"
+        schema={testSchema}
+        uiSchema={testUiSchema}
+        onSubmit={jest.fn()}
+        customValidate={(data, errors) => {
+          errors.title.addError("test error");
+          return errors;
+        }}
+      />
+    );
+    const testFn = jest.fn();
+
+    const submit = await result.findByText("Submit");
+    const titleLabel = await result.findByText("Title");
+    titleLabel.scrollIntoView = testFn;
+    fireEvent.click(submit);
+    expect(testFn).toHaveBeenCalledTimes(1);
+    expect(result.container.querySelector(`[for="root_title"]`)).not.toBeNull();
+  });
+
+  it("Should scroll to the top of the form if validation failed without a specific property", async () => {
+    const result = render(
+      <BaseForm
+        className="testClass"
+        schema={testSchema}
+        uiSchema={testUiSchema}
+        onSubmit={jest.fn()}
+        customValidate={(data, errors) => {
+          errors.addError("test error");
+          return errors;
+        }}
+      />
+    );
+    const testFn = jest.fn();
+
+    const submit = await result.findByText("Submit");
+    const formWrapper = await result.findByTestId("formWrapper");
+    formWrapper.scrollIntoView = testFn;
+    fireEvent.click(submit);
+    expect(testFn).toHaveBeenCalledTimes(1);
+  });
 });