Button prevent-double-click does not seem to be working in Edge

[AnthonyEdmonds]

Description of the issue

The data-prevent-double-click attribute does not seem to be working with Edge.

I have been receiving reports of form double-submissions, but only from a limited subset of users.

Upon investigation, double-click prevention on buttons is working in Firefox and Chrome, but not in Edge.

I am looking to see what I can do from my end, and I'll see whether I can pinpoint the issue with the JavaScript in Edge.

Steps to reproduce the issue

1. Rapidly and repeatedly press the submit button with the data-prevent-double-click attribute, as per the docs, as part of a form viewed in Edge.

2. Check the backend for duplicated submissions.

Actual vs expected behaviour

Expected: The form only submits once

Actual: The form submits as many times as the user can click before the next page loads

Environment (where applicable)

• Operating system: Windows 10
• Browser: Edge
• Browser version: 114.0.1823.82

[AnthonyEdmonds]

Seems that Edge is propogating the event to the form, so while the button isn't doing anything the form is.

let clicks = 0;

B.prototype.debounce = function (t) {
    clicks++;
    console.log("Received click", clicks);

  if (this.config.preventDoubleClick) {
      console.log("Double click prevention is on");

        if (this.debounceFormSubmitTimer) {
            console.log("Prevented extra click", t);
            t.stopPropagation();
            return t.preventDefault(), !1;
        }

        this.debounceFormSubmitTimer = setTimeout(
            function () {
                this.debounceFormSubmitTimer = null;
            }.bind(this),
            Z * 1e3
        );

        console.log("Debounce activated");
  }
};

[AnthonyEdmonds]

Have tested adding t.stopPropagation(); in Edge, Firefox, and Chrome, and all is now working as expected. Will raise a PR with this fix for review.

[AnthonyEdmonds]

Looks like the code for this is over in the govuk-frontend repo, so I will raise it over there.

https://github.com/alphagov/govuk-frontend/pull/3992

[36degrees]

@AnthonyEdmonds we can transfer this issue there and reopen it, if you prefer?

[AnthonyEdmonds]

@AnthonyEdmonds we can transfer this issue there and reopen it, if you prefer?

Sure, whatever works best for your team is fine by me.

[36degrees]

I'm surprised that you're seeing different behaviour between Chrome and Edge as both are based on Chromium and the differences tend to be relatively minor.

Can you confirm which version of Chrome you've tested in? Wondering if there might be a regression in Chromium 114.

[AnthonyEdmonds]

I am similarly surprised, and am open to the idea that it is something to do with the "corporate" version of Edge that is in use here.

I have tried again this morning, and Chrome is now exhibiting the same issue. I don't know which version I was running in the original test.

Browser	Version	Working
Edge	115.0.1901.183	No
Chrome	115.0.5790.102	No
Firefox	115.0.2	Yes

[36degrees]

@AnthonyEdmonds what behaviour do you see in https://codepen.io/36degrees/pen/OJaovxL?editors=1111? If you click the button do you see console log entries for the form submit event?

[owenatgov]

@AnthonyEdmonds Have you had a change to look at @36degrees's comment just above? We haven't had a chance since then to re-investigate this or https://github.com/alphagov/govuk-frontend/pull/3992 as a potential fix. If you're able to help us drill down why we're not able to replicate this it'll hopefully help us move this along.

[AnthonyEdmonds]

Apologies, I have been not only putting new systems live, but also moving house!

I'll try to find some time to look at this next Monday.

[AnthonyEdmonds]

@AnthonyEdmonds what behaviour do you see in https://codepen.io/36degrees/pen/OJaovxL?editors=1111? If you click the button do you see console log entries for the form submit event?

Can confirm that I only get the button click in Edge, and not the form submission.

Here's the HTML of a form I have which submits repeatedly on rapid submit button press:

<form
    accept-charset="UTF-8"
    action="a-url"
    enctype="multipart/form-data"
    method="post"
>
    <div class="govuk-button-group">
        <button
            class="govuk-button"
            data-module="govuk-button"
            data-prevent-double-click="true"
        >Submit</button>
    </div>
</form>

I am at a loss to explain the difference between your and my example. I suppose the compiler, Vite, could be doing something to the code which breaks it, but then I can't explain why it works properly in Firefox.

[AnthonyEdmonds]

Another fix I came up with was to disable the button on submit. Crude, but effective.

[AnthonyEdmonds]

Something I have noticed when refreshing myself on the issue and retesting, is the issue in Edge / Chome actually seems to be related to the request return.

I added a two second delay to the response from the server, and watching the browser console showed that it was only submitting once. However, because I was repeatedly clicking the submit button, once the response came back the browser sent another one instead of loading the response.

So the double click issue was only present when my server responded before the second click.

I tried this with Firefox, and it did not exhibit the same behaviour, so I am guessing that Edge / Chrome allows the form to interrupt the page redirection / progression.