Skip to content

Propagate turbo:submit-end events from data-turbo-method links #1406

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jeremy wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Propagate turbo:submit-end events from data-turbo-method links #1406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/observers/form_link_click_observer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export class FormLinkClickObserver {
this.delegate.submittedFormLinkToLocation(link, location, form)

document.body.appendChild(form)
form.addEventListener("turbo:submit-end", () => form.remove(), { once: true })
form.addEventListener("turbo:submit-end", () => requestAnimationFrame(() => form.remove()), { once: true })
requestAnimationFrame(() => form.requestSubmit())
}
}
20 changes: 20 additions & 0 deletions src/tests/functional/form_submission_tests.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1256,6 +1256,26 @@ test("stream link method form submission within form outside frame", async ({ pa
assert.equal(await page.textContent("#frame div.message"), "Link!")
})

test("link with [data-turbo-method] propagates turbo:submit-end beyond the form", async ({ page }) => {
await page.evaluate(() => {
let eventPropagatedPastForm = false

// Listen on document to verify event propagates beyond the form element
document.addEventListener("turbo:submit-end", (event) => {
if (event.target.tagName === "FORM") {
eventPropagatedPastForm = true
}
})

window.eventPropagatedPastForm = () => eventPropagatedPastForm
})

await page.click("#turbo-method-post-to-targeted-frame")
await nextEventNamed(page, "turbo:submit-end")

assert.ok(await page.evaluate(() => window.eventPropagatedPastForm()), "turbo:submit-end propagated past the form element")
Comment on lines +1260 to +1276
Copy link
Contributor

@seanpdoyle seanpdoyle Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this test be re-written to utilize Playwright's retrying assertions?:

Suggested change
await page.evaluate(() => {
let eventPropagatedPastForm = false
// Listen on document to verify event propagates beyond the form element
document.addEventListener("turbo:submit-end", (event) => {
if (event.target.tagName === "FORM") {
eventPropagatedPastForm = true
}
})
window.eventPropagatedPastForm = () => eventPropagatedPastForm
})
await page.click("#turbo-method-post-to-targeted-frame")
await nextEventNamed(page, "turbo:submit-end")
assert.ok(await page.evaluate(() => window.eventPropagatedPastForm()), "turbo:submit-end propagated past the form element")
const html = page.locator("html")
await html.evaluate((documentElement) => {
documentElement.addEventListener("turbo:submit-end", ({ target }) => {
if (target instanceof HTMLFormElement) {
documentElement.toggleAttribute("data-turbo-submit-end", true)
}
})
})
await page.click("#turbo-method-post-to-targeted-frame")
await nextEventNamed(page, "turbo:submit-end")
await expect(html, "turbo:submit-end propagated past the form element").toHaveAttribute("data-turbo-submit-end")

})

test("turbo:before-fetch-request fires on the form element", async ({ page }) => {
await page.click('#targets-frame form.one [type="submit"]')
assert.ok(await nextEventOnTarget(page, "form_one", "turbo:before-fetch-request"))
Expand Down
Loading