Contrib.social

Duplicate buttons from Dialog UI within Ajax Wizard when using Chrome/Edge browser back button

Open on Drupal.org →
Created on 29 June 2023, over 1 year ago
Updated 5 April 2024, 8 months ago

Problem/Motivation

After submitting a multi-step wizard-page form that uses Ajax, along with Dialog UI, and then using the Chrome browser back button to go back to the form, and then re-launching the modal wizard, I see a duplicate Next button that doesn't work.

From what I can tell, this may be a Drupal Core issue relating to dialog.ajax.js, though I have not tried to reproduce in other contexts. It appears to work correctly in Firefox, but is broken in Chrome and Edge.

Steps to reproduce

  1. New Drupal 9.5.9 install with Webform 6.1.5 enabled.
  2. Enable webform config Enable site-wide dialog support
  3. Create a page "Start page" with content <p><a class="webform-dialog webform-dialog-narrow button" href="/form/test-multi-step-wizard">Launch the modal</a></p>
  4. Create a page "Confirmation page" with url alias "/confirmation-page"
  5. Create a new webform Test multi-step wizard with settings "Allow users to post submissions from a dedicated URL" and confirmation page URL alias "/confirmation-page"
  6. In the webform, turn on "Use AJAX"
  7. Webform Build export is
    page_1:
  '#type': wizard_page
  '#title': 'Page 1'
  page_one_question:
    '#type': textarea
    '#title': 'page one question'
page_2:
  '#type': wizard_page
  '#title': 'Page 2'
  page_two_question:
    '#type': textarea
    '#title': 'Page two question'
page_3:
  '#type': wizard_page
  '#title': 'Page 3'
  page_three_question:
    '#type': textarea
    '#title': 'page three question'
  1. Launch the webform from the Start Page node. (It opens in a Dialog UI.)
  2. Fill out each question, clicking the next button, and finally the Submit button.
  3. You are taken to the Confirmation page. Click the browser's back button.
  4. You are taken back to the Start page with the dialog closed. Click the button to open the dialog.
  5. Fill out the first question and hit "Next" to go to the next page.
  6. You now see the Next/Previous button of the current page, along with the original "Next" button from the previous page

Here is a screenshot of the broken state:

Proposed resolution

This is not a proposal for the resolution of the problem, but it is a workaround that I have found. Including this javascript on the Start page will force a full refresh of the page, which stops the problem from occurring, though it is a bit heavy-handed.

  // Something about Dialog UI and Webform is not right. Navigating to the
  // start page using the browser back button messes up the Dialog UI state,
  // and causes certain Drupal.behaviors not to work correctly resulting in
  // messed up buttons.
  // Simply forcing a hard-refresh when using the back button solves the issue.
  // @todo more closely check dialog.ajax.js to determine what exactly is
  // getting messed up when using the back button in Chrome.
  window.addEventListener("pageshow", function (event) {
    const historyTraversal = event.persisted ||
      (typeof window.performance != "undefined" &&
        window.performance.navigation.type === 2);
    if (historyTraversal) {
      // Handle page restore.
      window.location.reload();
    }
  });
🐛 Bug report
Status

Closed: duplicate

Version

6.1

Component

Code

Created by

🇺🇸United States jessehs Taos, New Mexico

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

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024