Double form submission on step #2 of multi step webform

Created on 13 June 2023, over 1 year ago
Updated 8 April 2024, 8 months ago

Problem/Motivation

When using a multi step form with more than 2 steps, the form submission triggers twice on the 2nd step and empty the 1st step field value after reloading the page on the 3rd step.

Steps to reproduce

  1. Create a multi step form and add 3 pages on it.
  2. For each page, add a text field element and check the 2nd step text field as required.
  3. Create a custom module and add a webform_submission_form_alter hook on it
  4. Add a var_dump instruction with any text e.g var_dump('test'); into the hook
  5. Go to 'view' tab on the webform you just created.
  6. On the 1st step, the var_dump output should show only once, e.g. 'test'. Fulfill the field with any value on it and go to the 2nd step
  7. The var_dump output now shows twice. If you dump the $form_state object, you will notice different values on it: empty on the 1st dump, and on the 2nd dump, it shows all values
  8. On the 2nd step, fulfill the required field with any value and proceed to the next step
  9. The var_dump output is back to normal (showing only once) at the 3rd step
  10. Reload the page (send form data again)
  11. This will take the user back to the 2nd step, instead of the 1st one. The field value at this moment is correct
  12. Click on the previous button, and go back to the 1st step, and check the field value. It became empty
🐛 Bug report
Status

Postponed: needs info

Version

6.2

Component

Code

Created by

🇧🇷Brazil daniel_arend

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @daniel_arend
  • Please provide the YAML of a minimal example form.

  • Also, can you explain steps to reproduce that describe the bug behavior, without the value dumping?

  • 🇧🇷Brazil daniel_arend

    Yaml file is uploaded.

  • 🇧🇷Brazil daniel_arend

    The value dump is part of the bug, because is the only way to detect that is running a double validation on the second step.

  • 🇧🇷Brazil daniel_arend

    Here follows the code I made. I also attached a video with the bug in action

    
     function mymodule_webform_submission_form_alter(&$form, $form_state, $form_id) {
    
        echo '<pre style="background:yellow;">';
        var_dump($form_state->getValues());
        echo '</pre>';
        
      }
    
    
  • 🇧🇷Brazil henriquesf Pelotas, RS

    Same issue!

  • 🇧🇷Brazil daniel_arend

    Here is some explanation about what I tried to fix the issue:

    https://excalidraw.com/#json=R75jneYKHbK13FMsuLg7H,uxFDrzKLtZadt8ZxBFm6Cg

    Somehow, the step #2 do additional things (rebuild maybe) that trigger the form_alter hook twice. At first trigger, the form_state variable is empty, the 2nd one the form_state values are set as should be.

    It seems to be something on the way between stack 1 and stack 4 (link above).
    I also tracked the overrideSettings method line by line, but could not find where/why is this hook triggering twice only in the 2nd step.
    I hope this info helps to find the root cause.

  • Status changed to Postponed: needs info over 1 year ago
  • 🇺🇸United States jrockowitz Brooklyn, NY

    I am confused because this does not seem to be a regression.

    When multistep forms render the form is built (no values), processed (callback), and rebuilt (with values).

  • 🇧🇷Brazil henriquesf Pelotas, RS

    I am with the same issue.

  • 🇧🇷Brazil daniel_arend

    Thanks for the feedback. The workflow you described makes sense. But I'm still stucked into something I can only solve using form_alter hook.

    The complete scenario is:

    I have a multi-step form and need to do some extra validations after the user clicks on "prev/next" button. So I'm checking form state values inside this form_alter hook.
    As it triggers twice (and it happens only on the 2nd step), the first time this info is empty (build), and only after rebuild, the values are set.
    This will throw a false validation error (2nd step) on build, and then will pass on the second one, when values are set.

    It gets more strange, because all other steps (1, 3, 4, etc) it runs only once and works exactly like it should.

    As we need to check step by step, a custom handler would not solve the issue.

  • 🇧🇷Brazil henriquesf Pelotas, RS

    Up!

  • 🇺🇸United States jrockowitz Brooklyn, NY

    Someone who is experiencing this issue is going to have to debug it.

  • I am experiencing an issue that is quite the same. In one particular webform, while I am on the 2nd step I click Next to go the 3rd, I am redirected to the 1st step, and I get an error saying that the required fields of the first step are empty. This happens randomly. The behavior is the same as I was on the 2nd step and clicked the refresh button from the browser and then Resend.

    @daniel_arend did you manage to solve this?

  • 🇮🇳India dhanalakshmi1013

    I'm having the same issue, but in a different way. I have a multistep webform with 9 steps and each step data sending to Datalayer GTM. Only 5,6,7 steps are submitting twice in GTM console rest all are sending the event once. While debugging this issue, I have observed that Alter_form where my datalayer JS is attached is calling twice on a single submit.

    Can anyone share thoughts on this please!

  • 🇺🇸United States jrockowitz Brooklyn, NY
Production build 0.71.5 2024