"Submit previous page when browser back button" corrupts anchor links including inline form validation

Created on 3 October 2021, over 2 years ago

Updated 22 May 2024, about 1 month ago

Problem/Motivation

When the option Submit previous page when browser back button is clicked? is enabled on a multi-page form, anchor links do not work any more as expected. Instead when clicking on any anchor link, the first form page is loaded.

Steps to reproduce

The steps require inline form validation to be enabled, but you can place any anchor link on the second form page.

Create a multi-page form
Put a required field on page 2
Enable Submit previous page when browser back button is clicked?
Navigate to the form, proceed to page 2
Trigger validation by not filling out a required field
Click on the anchor link of the error message on top of the page
Browser jumps to the field, but also loads page 1 of the form

You can also use this form:

langcode: en
status: open
dependencies: {  }
open: null
close: null
weight: 0
uid: 7
template: false
archive: false
id: dev_webform_back_button
title: dev_webform_back_button
description: ''
category: ''
elements: |
  1:
    '#type': webform_wizard_page
    '#title': '1'
    name:
      '#type': textfield
      '#title': name
  2:
    '#type': webform_wizard_page
    '#title': '2'
    position:
      '#type': textfield
      '#title': position
      '#required': true
css: ''
javascript: ''
settings:
  ajax: false
  ajax_scroll_top: form
  ajax_progress_type: ''
  ajax_effect: ''
  ajax_speed: null
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  page_theme_name: ''
  form_title: source_entity_webform
  form_submit_once: false
  form_exception_message: ''
  form_open_message: ''
  form_close_message: ''
  form_previous_submissions: true
  form_confidential: false
  form_confidential_message: ''
  form_remote_addr: true
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_reset: false
  form_disable_autocomplete: false
  form_novalidate: false
  form_disable_inline_errors: false
  form_required: false
  form_unsaved: false
  form_disable_back: false
  form_submit_back: true
  form_autofocus: false
  form_details_toggle: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  share: false
  share_node: false
  share_theme_name: ''
  share_title: true
  share_page_body_attributes: {  }
  submission_label: ''
  submission_log: false
  submission_views: {  }
  submission_views_replace: {  }
  submission_user_columns: {  }
  submission_user_duplicate: false
  submission_access_denied: default
  submission_access_denied_title: ''
  submission_access_denied_message: ''
  submission_access_denied_attributes: {  }
  submission_exception_message: ''
  submission_locked_message: ''
  submission_excluded_elements: {  }
  submission_exclude_empty: false
  submission_exclude_empty_checkbox: false
  previous_submission_message: ''
  previous_submissions_message: ''
  autofill: false
  autofill_message: ''
  autofill_excluded_elements: {  }
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_progress_link: false
  wizard_progress_states: false
  wizard_auto_forward: true
  wizard_auto_forward_hide_next_button: false
  wizard_keyboard: true
  wizard_start_label: ''
  wizard_preview_link: false
  wizard_confirmation: true
  wizard_confirmation_label: ''
  wizard_track: ''
  wizard_prev_button_label: ''
  wizard_next_button_label: ''
  wizard_toggle: true
  wizard_toggle_show_label: ''
  wizard_toggle_hide_label: ''
  preview: 0
  preview_label: ''
  preview_title: ''
  preview_message: ''
  preview_attributes: {  }
  preview_excluded_elements: {  }
  preview_exclude_empty: true
  preview_exclude_empty_checkbox: false
  draft: none
  draft_multiple: false
  draft_auto_save: false
  draft_saved_message: ''
  draft_loaded_message: ''
  draft_pending_single_message: ''
  draft_pending_multiple_message: ''
  confirmation_type: page
  confirmation_title: ''
  confirmation_message: ''
  confirmation_url: ''
  confirmation_attributes: {  }
  confirmation_back: true
  confirmation_back_label: ''
  confirmation_back_attributes: {  }
  confirmation_exclude_query: false
  confirmation_exclude_token: false
  confirmation_update: false
  limit_total: null
  limit_total_interval: null
  limit_total_message: ''
  limit_total_unique: false
  limit_user: null
  limit_user_interval: null
  limit_user_message: ''
  limit_user_unique: false
  entity_limit_total: null
  entity_limit_total_interval: null
  entity_limit_user: null
  entity_limit_user_interval: null
  purge: none
  purge_days: null
  results_disabled: false
  results_disabled_ignore: false
  results_customize: false
  token_view: false
  token_update: false
  token_delete: false
  serial_disabled: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
    permissions: {  }
  view_any:
    roles: {  }
    users: {  }
    permissions: {  }
  update_any:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_any:
    roles: {  }
    users: {  }
    permissions: {  }
  purge_any:
    roles: {  }
    users: {  }
    permissions: {  }
  view_own:
    roles: {  }
    users: {  }
    permissions: {  }
  update_own:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_own:
    roles: {  }
    users: {  }
    permissions: {  }
  administer:
    roles: {  }
    users: {  }
    permissions: {  }
  test:
    roles: {  }
    users: {  }
    permissions: {  }
  configuration:
    roles: {  }
    users: {  }
    permissions: {  }
handlers: {  }
variants: {  }

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report

Status

Needs work

Version

6.2

Component

Code

Created by

🇩🇪Germany anruether Bonn

Live updates comments and jobs are added and updated live.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment 3 months ago →
🇺🇸United States jrockowitz Brooklyn, NY
I am pretty sure (but have not confirmed) that this issue was fixed via 🐛 Multisteps form - Browser back button with Chrome - Ajax out of control Fixed .
Comment about 1 month ago →
🇬🇧United Kingdom Steven Jones
@jrockowitz in #7 from my testing, that's not fixed it.
I'm not entirely sure why it would, and that code in webform.behaviors.js is proper weird. Looks like it's checking some stuff on page load and then introducing a delay for attaching behaviors from then on out, weird!

Anyway, back to this issue at hand...I'm not sure how you detect the back button press in browsers these days, it's a bit of mess isn't it.

Maybe there's some way to label the item in the history state, and the when we push our new one on, detect if we're navigating back to the initial one, or an anchor link on the same page.

contrib.social Blog FAQ Discussions

Production build 0.69.0 2024