Setting form data on page load with multi-step form incorrectly disables next button

[garbit]

Reproduction

https://formkit.link/5d1ffb5af5616f121be76bac75b9c659

Describe the bug

Expected: When the page loads and the multi-step form state has been set using form.input(formData) the form state should reflect the conditions of the schema and previous step state to allow the user to proceed through the form.

Actual: When setting the form.input(formData) and using form.goTo prevents the user from proceeding to the next step when there is a condition placed on the current step that is based on a value of the previous step.

Reproduction context The multi-step form has 3 steps (1, 2, and 3). When step 2 has an if statement that checks step1 is set to Yes and you populate the form using form.input(old form data) the if statement in step 2 incorrectly prohibits you from advancing in the form.

It seems to be related to when you attach a :before-step-change handler to the multi-step form. When you have a before-step-change the form no longer progresses to the next step. If you remove this, then the step correctly allows you to proceed.

To reproduce the issue:

1. Load the form
2. Try to click "Next" (you are not able to)

To make the form detect the correct state:

1. Load the form
2. Click "Previous"
3. Click "No" and then click "Yes" to trigger the state change so that the validation / if statement now correctly assesses the step 1 value
4. Click "Next" to move to step 2
5. Step 2 should now allow you to click "Next"

To make the form work: Remove the :before-step-change handler and the form will correctly allow the user to progress using the "Next" button.

Environment

• OS: MacOS • Browser: Firefox, Safari, Chrome • Version: Firefox 121.0.1 (64-bit), Safari Version 17.2.1 (19617.1.17.11.12), Chrome Version 120.0.6099.234 (Official Build) (arm64)

Issue seems to be the same on formkit versions 1.4 - 1.5.1

[andrew-boyd]

@garbit Thank you for the thorough report. Looking into this I stripped down the playground to it's most basic reproduction. The following steps "fix" the issue:

• Removing the beforeStepChange function (which you noted).
• Removing the conditional in the schema that affects the rendering of step2.
• Putting the form.goTo() call into a setTimeout. <-- this is the most likely to actually be helpful for the time being

Here is a playground with comments and the goTo call set in a timeout. Hopefully that will at least give you (and others) a workaround while I figure out how to make none of the above options steps necessary.

https://formkit.link/af025ebde2cd53a2ed724beb727134a2

[garbit]

Thanks for looking into this. My method of getting around the issue was to introduce a modal to the returning user along the lines of "Welcome back - click this button to return to your last step" - whilst I loaded the form data in the background and then trigger the goTo once the user clicks the return to step button.

edit It's also possible to use await form.calm() before you call goTo. It seems to resolve the issue.