-
Notifications
You must be signed in to change notification settings - Fork 478
Description
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.