Emit turbo:submit-failed when form is rejected
#319
Conversation
| if (response.clientError || response.serverError) { | ||
| this.result = { success: false, fetchResponse: response } | ||
| dispatch("turbo:submit-failed", { target: this.formElement, detail: { formSubmission: this, ...this.result } }) | ||
| this.delegate.formSubmissionFailedWithResponse(this, response) |
There was a problem hiding this comment.
I am actually not confident this code is ever called. If the fetchResponse is not a 2xx it will not be ok and therefore only the requestFailedWithResponse method will be called.
I added it here for safety, but this branch of code might not ever be called.
|
After a form submission, |
It is, I actually didn't realize this because I think sometimes |
Description
This PR adds a new event to the Turbo Drive form submission lifecycle called
turbo:submit-failed.This event is dispatched when a form is rejected by the server or the server throws an error.Why a new event?
In a situation where a form submission is successful, Turbo Drive will follow the redirect and kick off a
turbo:visitevent. A lot of JS libs explicitly look out for this event to correct their state with the DOM is redrawn. One example is Intercom. In this situation, everything works as expected.But when a form is rejected by the server, new HTML is rendered in the DOM, but no
turbo:visitevent is ever fired. This means external scripts that may need to redraw HTML elements in a situation where they may already have state attached towindowcannot do so.I think the event could also be useful in other JS contexts (ex: like sending a report to an error monitoring service, or scrolling the window to a specific position), but I wanted to be honest about my need for it.