Wizard: Add beforeNext conditions to Details step footer

This adds beforeNext condition to the custom Details step footer, allowing to validate after clicking Next. That way the button is enabled, but gets disabled in the case validation errors and the helper text with the error renders immediately.
osbuild · Aug 29, 2024 · 7f3de68 · 7f3de68
1 parent e38ffe4
commit 7f3de68
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx
@@ -190,6 +190,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   // Firstboot
   const firstBootValidation = useFirstBootValidation();
   // Details
+  const [detailsPristine, setDetailsPristine] = useState(true);
   const detailsValidation = useDetailsValidation();
 
   let startIndex = 1; // default index
@@ -424,7 +425,14 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
             status={detailsValidation.disabledNext ? 'error' : 'default'}
             footer={
               <CustomWizardFooter
-                disableNext={detailsValidation.disabledNext}
+                beforeNext={() => {
+                  if (detailsValidation.disabledNext) {
+                    setDetailsPristine(false);
+                    return false;
+                  }
+                  return true;
+                }}
+                disableNext={!detailsPristine && detailsValidation.disabledNext}
               />
             }
           >