Bug: pre-trigger form submit in multistep form

[evgeniyworkbel]

There is multistep form with 3 steps: 1st, 2nd steps don't contain forms and 3rd contains. There is general submit button for all steps: it is located outside steps and connected with 3rd form by its id (button has "form" attribute with the same id as form). Value for button "form" attribute is changing depending on active step.

React version: 18.2.0

Steps To Reproduce

1. Open sandbox console
2. Click submit button 2 times in order to transit to 3rd step
3. See that onSubmit handler has already fired

Link to code example: https://codesandbox.io/p/sandbox/pre-trigger-form-validation-react-18-cc3xl5

The current behavior

Form of 3rd step has submitted immediately after transition from 2nd step

The expected behavior

Form of 3rd step will not be submitted immediately after transition from 2nd step and will be submitted only after click submit btn which is connected with this form by id

[muhammadalmaskhan]

Possible Cause & Solution

It looks like the form submission is being triggered prematurely due to how the form attribute changes when transitioning between steps. When the step updates, React may still associate the previous submit action with the new form.

Potential Fixes:
Prevent Default Submission on Step Change

Ensure that clicking "Next" between steps doesn’t accidentally trigger form submission.
Use event.preventDefault() before updating the step state.
Delay form Attribute Update

Instead of changing the form attribute immediately, wrap the update inside useEffect() so that it only updates after React commits the state change.
Control Submission with State

Instead of relying on form attribute switching dynamically, track whether the form is "ready" for submission using state.
Would you be able to confirm if wrapping the step change in useEffect() prevents premature submission? I can also suggest a working code update if needed.

[evgeniyworkbel]

@muhammadalmaskhan, yes, delay form attribute update using useEffect helps solving. I did that:

  const [currFormId, setCurrFormId] = React.useState();

  React.useEffect(() => {
    setCurrFormId(formIdMap[activeStep]);
  }, [activeStep]);

Many thanks, Almas! 🚀

NOTE: One of my ways to solve the issue is updating key prop for submit button like key={activeStep}. It can replace effect+state

[muhammadalmaskhan]

Hi @evgeniyworkbel,
Have a look to following as well 💚

while (true) {
  console.log("Thanks for appreciating, @evgeniyworkbel! So glad we could solve the problem together! 🚀");
}

[evgeniyworkbel]

Another issue I met (related to submit btn outside form) is not triggering form onSubmit event when disable attribute is set on button and its value derives from state directly. It doesn't matter you use local react state or global one (e.g. redux).

Here is sandbox with issue.

Main concept to fix it is deferring value for disable attribute of submit button.

SOLUTIONS:

• wrap value for button disability into useDeferredValue (sandbox)
• wrap state setter in startTransition (sandbox)
• wrap state setter in setTimeout in order to put this task to macrotask queue (sandbox)

@muhammadalmaskhan what do you think about this?