ability to skip a multistep step

daniel3830 · Feb 6, 2023 · a9d17ad · a9d17ad
1 parent 0bebbe4
commit a9d17ad
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 4.40.0 (Feb 6th, 2023)
+
+### Added
+
+- ability to skip a multistep step
+
 ## 4.39.3 (January 23rd, 2023)
 
 ### Fixed

diff --git a/src/hooks/useMultistep.js b/src/hooks/useMultistep.js
@@ -185,19 +185,19 @@ const useMultistep = ({ initialStep, multistepApiRef }) => {
       }
     };
 
-    const next = cb => {
+    const next = (cb, { skip } = {}) => {
       // Get the next step
       const nextStep = getNextStep();
       if (nextStep) {
         // Touch all the fields
-        formApi.touchAllFields();
+        if (!skip) formApi.touchAllFields();
         // Validate the form
-        validate();
+        if (!skip) validate();
         // Async validate the form
         // We pass in a callback to proceed if we succeed async validation!
-        asyncValidate(() => proceed(nextStep, cb));
+        if (!skip) asyncValidate(() => proceed(nextStep, cb));
         // Only proceed if we are valid and we are NOT currently async validating
-        if (getFormState().valid && getFormState().validating === 0) {
+        if (skip || (getFormState().valid && getFormState().validating === 0)) {
           proceed(nextStep, cb);
         }
       }

diff --git a/stories/Multistep/Actions/README.md b/stories/Multistep/Actions/README.md
@@ -77,6 +77,10 @@ const Favorite = () => {
         <button type="button" onClick={next}>
           Next
         </button>
+        {/* You can do this to skip this step */}
+        <button type="button" onClick={() => next(null, { skip: true })}>
+          Skip
+        </button>
       </div>
     </Multistep.Step>
   );

diff --git a/stories/Multistep/Actions/index.js b/stories/Multistep/Actions/index.js
@@ -99,6 +99,10 @@ const Favorite = () => {
         <button type="button" onClick={next}>
           Next
         </button>
+        {/* You can do this to skip this step */}
+        <button type="button" onClick={() => next(null, { skip: true })}>
+          Skip
+        </button>
       </div>
     </Multistep.Step>
   );

diff --git a/stories/Multistep/Basic/index.js b/stories/Multistep/Basic/index.js
@@ -68,6 +68,9 @@ const Info = () => {
       <button type="button" onClick={next}>
         Next
       </button>
+      {/* <button type="button" onClick={() => next(null, { skip: true })}>
+        Next
+      </button> */}
     </Multistep.Step>
   );
 };