Submit button re-enabled after form submit before redirecting user to another page

[mauricebolhuis]

Hi,

I am facing the following problem:

When a user submits a form in my Rails 7 application the submit button is disabled. After a form is submitted the user is redirected to another page. In between the moment that the form is submitted and the user is actually redirected the submit button is suddenly enabled again. This is similar behavior as described in this old issue in rails-ujs rails/rails#31441 (see GIFs in that issue). For an end user this might seem strange and it seems like a bug to me. Note, I am not using rails-ujs. In that pull request they fixed the issue by not enabling disabled elements for XHR redirects.

In #386 a change was made for disabling/enabling submit buttons. This pull request states "If callers need to control the submitter's disabled attribute more finely, they can declare listeners to do so.". Since the button is enabled again in Turbo's FormSubmission.requestFinished method just before dispatching a TurboSubmitEndEvent, I can workaround this problem by re-disabling the button myself again by declaring a listener on turbo:submit-end:

document.addEventListener('turbo:submit-end', (event) => {
  if (event.detail.fetchResponse.response.redirected === true) {
    event.target.querySelectorAll('[type=submit]').forEach((button) => {
      button.disabled = true;
    });
  }
});

Although this seems to work, I think this should be fixed in Turbo.

Is it maybe an idea to change the requestFinished method in form_submission.ts to something like:

diff --git a/src/core/drive/form_submission.ts b/src/core/drive/form_submission.ts
--- a/src/core/drive/form_submission.ts	(revision 4dd0e83c2a695ecf5490c07da298cca867b2b1f8)
+++ b/src/core/drive/form_submission.ts	(date 1666010546099)
@@ -201,7 +201,11 @@
 
   requestFinished(_request: FetchRequest) {
     this.state = FormSubmissionState.stopped
-    this.submitter?.removeAttribute("disabled")
+
+    if (!this.result?.fetchResponse?.redirected) {
+      this.submitter?.removeAttribute("disabled")
+    }
+
     dispatch<TurboSubmitEndEvent>("turbo:submit-end", {
       target: this.formElement,
       detail: { formSubmission: this, ...this.result },

If so, I could open a pull request to fix this.

[esb]

I agree!

The disabled attribute being removed too early when redirecting presents a very confusing message to the user. The old UJS behaviour was easy to use and did what it should, but the new Turbo implementation seems to be lacking as it's not providing the same level of support.

[Rykus0]

Having this problem as well. Seeing as how this is 2 years old with no PR or other progress, I'm going to submit one with your suggestion.