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 · Oct 7, 2024 · 4550bc7 · 4550bc7
1 parent b4ac543
commit 4550bc7
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/Components/CreateImageWizard/CreateImageWizard.tsx b/src/Components/CreateImageWizard/CreateImageWizard.tsx
@@ -203,6 +203,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   // Firstboot
   const firstBootValidation = useFirstBootValidation();
   // Details
+  const [detailsPristine, setDetailsPristine] = useState(true);
   const detailsValidation = useDetailsValidation();
 
   let startIndex = 1; // default index
@@ -453,7 +454,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}
               />
             }
           >

diff --git a/src/test/Components/CreateImageWizard/steps/Details/Details.test.tsx b/src/test/Components/CreateImageWizard/steps/Details/Details.test.tsx
@@ -63,6 +63,7 @@ describe('Step Details', () => {
     const nextButton = await getNextButton();
     expect(nextButton).toBeEnabled();
     await enterBlueprintName(' ');
+    await clickNext();
     await waitFor(() => expect(nextButton).toBeDisabled());
   });
 
@@ -83,6 +84,7 @@ describe('Step Details', () => {
     await goToDetailsStep();
     await enterBlueprintName('Lemon Pie');
     const nextButton = await getNextButton();
+    await clickNext();
     await waitFor(() => expect(nextButton).toBeDisabled());
   });