diff --git a/src/app/base/components/FormikFormContent/FormikFormContent.test.tsx b/src/app/base/components/FormikFormContent/FormikFormContent.test.tsx index c9ec36f5dd1..13ff5b1f3c3 100644 --- a/src/app/base/components/FormikFormContent/FormikFormContent.test.tsx +++ b/src/app/base/components/FormikFormContent/FormikFormContent.test.tsx @@ -21,6 +21,7 @@ import { render, screen, renderWithBrowserRouter, + renderWithMockStore, } from "@/testing/utils"; const mockStore = configureStore(); @@ -497,4 +498,21 @@ describe("FormikFormContent", () => { expect(screen.getByTestId("footer")).toBeInTheDocument(); }); + + it("renders inline form correctly when inline prop is true", () => { + renderWithMockStore( + + + + + + ); + + expect(screen.getByRole("form", { name: "inline form" })).toHaveClass( + "p-form--inline" + ); + expect( + screen.getByRole("textbox", { name: "test field" }) + ).toBeInTheDocument(); + }); }); diff --git a/src/app/base/components/FormikFormContent/FormikFormContent.tsx b/src/app/base/components/FormikFormContent/FormikFormContent.tsx index 7ffbb567565..a3261ed9005 100644 --- a/src/app/base/components/FormikFormContent/FormikFormContent.tsx +++ b/src/app/base/components/FormikFormContent/FormikFormContent.tsx @@ -142,6 +142,7 @@ const FormikFormContent = ({ }, [onSuccess, hasErrors, hasSaved, values]); // Send an analytics event when form is saved. + useSendAnalyticsWhen( saved, onSaveAnalytics.category, @@ -167,6 +168,29 @@ const FormikFormContent = ({ } }, [navigate, savedRedirect, saved]); + const renderFormContent = () => ( + <> + {!!nonFieldError && ( + + {nonFieldError} + + )} + {typeof children === "function" ? children(formikContext) : children} + + ); + + const renderFormButtons = () => ( + + ); + return (
({ inline={inline} onSubmit={handleSubmit} > - {/* collapse content section when there's no content */} - - - {!!nonFieldError && ( - - {nonFieldError} - - )} - {typeof children === "function" - ? children({ ...formikContext }) - : children} - - - {editable && ( - - )} + {inline ? ( + <> + {renderFormContent()} + {editable && renderFormButtons()} {footer} - - + + ) : ( + + {renderFormContent()} + + {editable && renderFormButtons()} + {footer} + + + )}
); };