diff --git a/src/http/fetch_request.ts b/src/http/fetch_request.ts index b5cbd4d6a..0a814c1df 100644 --- a/src/http/fetch_request.ts +++ b/src/http/fetch_request.ts @@ -118,8 +118,12 @@ export class FetchRequest { get headers() { const headers = { ...this.defaultHeaders } - if (typeof this.delegate.prepareHeadersForRequest == "function") { - this.delegate.prepareHeadersForRequest(headers, this) + + let fetchRequest:any = this + while(fetchRequest = fetchRequest.delegate) { + if (typeof fetchRequest.prepareHeadersForRequest == "function") { + fetchRequest.prepareHeadersForRequest(headers, this) + } } return headers } diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js index 0cfff6493..9d5fef0eb 100644 --- a/src/tests/fixtures/test.js +++ b/src/tests/fixtures/test.js @@ -16,6 +16,7 @@ "turbo:before-visit", "turbo:load", "turbo:render", - "turbo:request-end", - "turbo:visit" + "turbo:visit", + "turbo:before-fetch-request", + "turbo:before-fetch-response", ]) diff --git a/src/tests/functional/form_submission_tests.ts b/src/tests/functional/form_submission_tests.ts index fe90a07cb..b1adb20e0 100644 --- a/src/tests/functional/form_submission_tests.ts +++ b/src/tests/functional/form_submission_tests.ts @@ -183,6 +183,14 @@ export class FormSubmissionTests extends TurboDriveTestCase { this.assert.equal(htmlAfter, htmlBefore) } + async "test frame form submission within a frame submits the Turbo-Frame header"() { + await this.clickSelector("#frame form.redirect input[type=submit]") + + const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request") + + this.assert.ok(fetchOptions.headers["Turbo-Frame"], "submits with the Turbo-Frame header") + } + async "test invalid frame form submission with unprocessable entity status"() { await this.clickSelector("#frame form.unprocessable_entity input[type=submit]") await this.nextBeat @@ -260,6 +268,14 @@ export class FormSubmissionTests extends TurboDriveTestCase { this.assert.equal(await this.pathname, "/src/tests/fixtures/one.html") } + async "test form submission targeting a frame submits the Turbo-Frame header"() { + await this.clickSelector('#targets-frame [type="submit"]') + + const { fetchOptions } = await this.nextEventNamed("turbo:before-fetch-request") + + this.assert.ok(fetchOptions.headers["Turbo-Frame"], "submits with the Turbo-Frame header") + } + get formSubmitted(): Promise { return this.hasSelector("html[data-form-submitted]") }