Skip to content

Commit

Permalink
Frames: Ignore already cancelled submit events
Browse files Browse the repository at this point in the history
Closes [#243][]

In tandem with [rails/rails#41960][] (which shipped as part of
`7.0.0.alpha2`), this commit modifies the `FormInterceptor` to ignore
`submit` events that have been cancelled.

Although it doesn't test the integration directly, the cancellation of
the `submit` event is what powers the ActiveStorage.js direct upload
asynchrony. Following a direct upload, ActiveStorage dispatches a
synthetic `submit` event, which the `FormInterceptor` will then respond
to.

[#243]: #243
[rails/rails#41960]: rails/rails#41960
  • Loading branch information
seanpdoyle committed Nov 20, 2021
1 parent 4a9f220 commit 78270e6
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/core/frames/form_interceptor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export class FormInterceptor {

submitBubbled = <EventListener>((event: SubmitEvent) => {
const form = event.target
if (form instanceof HTMLFormElement && form.closest("turbo-frame, html") == this.element) {
if (!event.defaultPrevented && form instanceof HTMLFormElement && form.closest("turbo-frame, html") == this.element) {
const submitter = event.submitter || undefined
const method = submitter?.getAttribute("formmethod") || form.method

Expand Down
9 changes: 9 additions & 0 deletions src/tests/functional/form_submission_tests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -564,6 +564,15 @@ export class FormSubmissionTests extends TurboDriveTestCase {
this.assert.notOk(await this.formSubmitStarted)
}

async "test frame form submission ignores submissions with their defaultPrevented"() {
await this.evaluate(() => document.addEventListener("submit", (event) => event.preventDefault(), true))
await this.clickSelector("#frame .redirect [type=submit]")
await this.nextBeat

this.assert.equal(await (await this.querySelector("#frame h2")).getVisibleText(), "Frame: Form")
this.assert.equal(await this.attributeForSelector("#frame", "src"), null, "does not navigate frame")
}

async "test form submission with [data-turbo=false] on the form"() {
await this.clickSelector('#turbo-false form[data-turbo="false"] input[type=submit]')
await this.nextBody
Expand Down

0 comments on commit 78270e6

Please sign in to comment.