Harmonize disabling wizard stepper buttons across all instances

JulianKniephoff · Jun 4, 2024 · 38be9eb · 38be9eb
1 parent 427072c
commit 38be9eb
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/events/partials/wizards/NewEventWizard.tsx b/src/components/events/partials/wizards/NewEventWizard.tsx
@@ -145,6 +145,7 @@ const NewEventWizard: React.FC<{
 								steps={steps}
 								page={page}
 								setPage={setPage}
+								formik={formik}
 								completed={pageCompleted}
 							/>
 							<div>

diff --git a/src/components/shared/wizard/WizardStepperEvent.tsx b/src/components/shared/wizard/WizardStepperEvent.tsx
@@ -8,11 +8,13 @@ import {
 	useStepperStyle,
 } from "../../../utils/wizardUtils";
 import CustomStepIcon from "./CustomStepIcon";
+import { FormikProps } from "formik";
 
 const WizardStepperEvent = ({
 	steps,
 	page,
 	setPage,
+	formik,
 	completed,
 } : {
 	steps: {
@@ -22,6 +24,7 @@ const WizardStepperEvent = ({
 	}[],
 	page: number,
 	setPage: (num: number) => void,
+	formik: FormikProps<any>,
 	completed: Record<number, boolean>,
 }) => {
 	const { t } = useTranslation();
@@ -50,6 +53,8 @@ const WizardStepperEvent = ({
 		}
 	};
 
+	const disabled = !(formik.dirty && formik.isValid);
+
 	return (
 		<Stepper
 			activeStep={page}
@@ -61,7 +66,7 @@ const WizardStepperEvent = ({
 			{steps.map((label, key) =>
 				label.hidden || (
 					<Step key={label.translation} completed={completed[key]}>
-						<StepButton onClick={() => handleOnClick(key)}>
+						<StepButton onClick={() => handleOnClick(key)} disabled={disabled}>
 							<StepLabel className={labelClasses.root} StepIconComponent={CustomStepIcon}>
 								{t(label.translation)}
 							</StepLabel>