feat: scroll to top of form when non-field errors are present MAASENG-3515

src/app/base/components/FormikFormContent/FormikFormContent.test.tsx

@@ -2,6 +2,7 @@ import { Field, Formik } from "formik";
 import { Provider } from "react-redux";
 import { MemoryRouter } from "react-router-dom";
 import configureStore from "redux-mock-store";
+import type { Mock } from "vitest";
 import * as Yup from "yup";
 
 import FormikFormContent from "./FormikFormContent";
@@ -31,7 +32,12 @@ vi.mock("react-router-dom", async () => {
 
 describe("FormikFormContent", () => {
   let state: RootState;
+  let scrollIntoViewSpy: Mock;
+
   beforeEach(() => {
+    scrollIntoViewSpy = vi.fn();
+    window.HTMLElement.prototype.scrollIntoView = scrollIntoViewSpy;
+
     state = factory.rootState({
       config: factory.configState({
         items: [
@@ -101,6 +107,18 @@ describe("FormikFormContent", () => {
     expect(screen.getByText("Uh oh!")).toBeInTheDocument();
   });
 
+  it("scrolls non-field errors into view when present", () => {
+    renderWithBrowserRouter(
+      <Formik initialValues={{}} onSubmit={vi.fn()}>
+        <FormikFormContent errors="Uh oh!">Content</FormikFormContent>
+      </Formik>,
+      { state }
+    );
+
+    expect(screen.getByText("Uh oh!")).toBeInTheDocument();
+    expect(scrollIntoViewSpy).toHaveBeenCalledTimes(1);
+  });
+
   it("can display non-field errors from the __all__ key", () => {
     renderWithBrowserRouter(
       <Formik initialValues={{}} onSubmit={vi.fn()}>

src/app/base/components/FormikFormContent/FormikFormContent.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode, AriaAttributes } from "react";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useId, useRef } from "react";
 
 import { ContentSection } from "@canonical/maas-react-components";
 import { Form, Notification } from "@canonical/react-components";
@@ -110,6 +110,7 @@ const FormikFormContent = <V extends object, E = null>({
     allowUnchanged,
   });
   const [hasSaved, resetHasSaved] = useCycled(saved);
+  const notificationId = useId();
   const hasErrors = !!errors;
 
   // Run onValuesChanged function whenever formik values change.
@@ -168,10 +169,18 @@ const FormikFormContent = <V extends object, E = null>({
     }
   }, [navigate, savedRedirect, saved]);
 
+  useEffect(() => {
+    if (nonFieldError) {
+      document
+        .getElementById(notificationId)
+        ?.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [nonFieldError, notificationId]);
+
   const renderFormContent = () => (
     <>
       {!!nonFieldError && (
-        <Notification severity="negative" title="Error:">
+        <Notification id={notificationId} severity="negative" title="Error:">
           {nonFieldError}
         </Notification>
       )}

src/setupTests.ts

@@ -8,21 +8,26 @@ const fetchMocker = createFetchMock(vi);
 
 fetchMocker.enableMocks();
 const originalObserver = window.ResizeObserver;
+const originalScrollIntoView = window.HTMLElement.prototype.scrollIntoView;
 
 beforeAll(() => {
   // disable act warnings
   global.IS_REACT_ACT_ENVIRONMENT = false;
 });
 
-// mock ResizeObserver for MainToolbar
 beforeEach(() => {
+  // mock ResizeObserver for MainToolbar
   window.ResizeObserver = vi.fn(() => ({
     observe: vi.fn(),
     unobserve: vi.fn(),
     disconnect: vi.fn(),
   }));
+
+  // mock scrollIntoView for FormikFormContent
+  window.HTMLElement.prototype.scrollIntoView = vi.fn();
 });
 
 afterEach(() => {
   window.ResizeObserver = originalObserver;
+  window.HTMLElement.prototype.scrollIntoView = originalScrollIntoView;
 });