diff --git a/src/app/base/components/FormikForm/FormikForm.tsx b/src/app/base/components/FormikForm/FormikForm.tsx index c8c8fd8dc7..8fa3a453bf 100644 --- a/src/app/base/components/FormikForm/FormikForm.tsx +++ b/src/app/base/components/FormikForm/FormikForm.tsx @@ -45,6 +45,7 @@ const FormikForm = ({ submitDisabled, submitLabel, "aria-label": ariaLabel, + buttonsBehavior = "coupled", ...formikProps }: Props): JSX.Element => { return ( @@ -53,6 +54,7 @@ const FormikForm = ({ allowAllEmpty={allowAllEmpty} allowUnchanged={allowUnchanged} aria-label={ariaLabel} + buttonsBehavior={buttonsBehavior} buttonsClassName={buttonsClassName} buttonsHelp={buttonsHelp} buttonsHelpClassName={buttonsHelpClassName} diff --git a/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx b/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx index 201d8a334f..e6785c20b4 100644 --- a/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx +++ b/src/app/base/components/FormikFormButtons/FormikFormButtons.tsx @@ -29,6 +29,12 @@ export type Props = { submitAppearance?: ActionButtonProps["appearance"]; submitDisabled?: boolean; submitLabel?: string; + /** + * Determines the behavior of the primary and secondary submit buttons. + * - "coupled" (default): The secondary submit button is disabled if the primary submit button is disabled. + * - "independent": The secondary submit button's disabled state is controlled independently. + */ + buttonsBehavior?: "coupled" | "independent"; }; export enum TestIds { @@ -62,6 +68,7 @@ export const FormikFormButtons = ({ submitAppearance = "positive", submitDisabled, submitLabel = "Save", + buttonsBehavior = "coupled", }: Props): JSX.Element => { const formikContext = useFormikContext(); const { values } = formikContext; @@ -77,7 +84,11 @@ export const FormikFormButtons = ({