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 · Sep 19, 2024 · dd717e9 · dd717e9
1 parent 4cc5a2e
commit dd717e9
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
@@ -200,6 +200,7 @@ const CreateImageWizard = ({ isEdit }: CreateImageWizardProps) => {
   // Firstboot
   const firstBootValidation = useFirstBootValidation();
   // Details
+  const [detailsPristine, setDetailsPristine] = useState(true);
   const detailsValidation = useDetailsValidation();
 
   let startIndex = 1; // default index
@@ -450,7 +451,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('validates name', () => {
     const nextButton = await getNextButton();
     expect(nextButton).toBeEnabled();
     await enterBlueprintName(' ');
+    await clickNext();
     await waitFor(() => expect(nextButton).toBeDisabled());
   });
 
@@ -83,6 +84,7 @@ describe('validates name', () => {
     await goToDetailsStep();
     await enterBlueprintName('Lemon Pie');
     const nextButton = await getNextButton();
+    await clickNext();
     await waitFor(() => expect(nextButton).toBeDisabled());
   });