Using the browser's back button disables checkout button on cart form

Created on 28 August 2023, over 1 year ago

Issue

When using the back button on your keyboard to go back to the cart the "Checkout" button under the cart form is not working anymore. After a refresh of the browser the checkout button works again.

Steps to reproduce

  • Add something to your cart
  • Click on Checkout underneath the cart
  • You will go to the first step in the checkout and then click on the back button on your keyboard
  • You will go back to the cart, but when you click on "Checkout" nothing happens

I've also checked if it's in your demo https://commerce.demo.centarro.io/ and there it is also a problem, so it's not something in my setup that is bugging here.

🐛 Bug report
Status

Active

Version

2.36

Component

Checkout

Created by

🇳🇱Netherlands jessica-atom

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

Comments & Activities

  • Issue created by @jessica-atom
  • 🇧🇪Belgium weseze

    Also have this issue while using Firefox or Edge back buttons. Not an issue in Chrome.

  • 🇧🇪Belgium weseze

    Seems this is issue is also present in plain vanilla Drupal core forms: 🐛 Prevention of multiple submits blocks use of back navigation Active

  • Here is a workaround using Javascript.
    You only need to include this file on webpages where you want to prevent this bug to happen.
    The idea is simple : if the page was loaded from browser cache, i want to force the refresh so drupal may rebuild the form.

    /**
     * @file
     * This script forces the page to fully load, without caching.
     * This is helpfull to prevent forms being broken when accessed through the back button.
     */
    (function (Drupal) {
      Drupal.behaviors.preventCache = {
        attach: function (context, settings) {
          // Ensure this runs only once per page load
          if (!context.querySelector || context.querySelector('[data-drupal-cache-prevented]')) {
            return;
          }
    
          // Reload the page if loaded from cache (back/forward navigation)
          window.onpageshow = function (event) {
            if (event.persisted) {
              location.reload();
            }
          };
    
          // Mark the page to avoid duplicate execution
          document.body.setAttribute('data-drupal-cache-prevented', 'true');
        }
      };
    })(Drupal);
Production build 0.71.5 2024