Skip to content

Commit a62fa18

Browse files
seanpdoyleseanpdoyle
committed
Treat response turbo-frame[disabled] as missing
When a response body has a `turbo-frame` element with an `[id]` that matches the requesting frame, ignore it if it's `[disabled]`.
1 parent 48b0f1c commit a62fa18

File tree

5 files changed

+50
-4
lines changed

5 files changed

+50
-4
lines changed

‎src/core/frames/frame_controller.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,11 +290,11 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
290290
let element
291291
const id = CSS.escape(this.id)
292292

293-
if (element = activateElement(container.querySelector(`turbo-frame#${id}`), this.currentURL)) {
293+
if (element = activateElement(container.querySelector(`turbo-frame:not([disabled])#${id}`), this.currentURL)) {
294294
return element
295295
}
296296

297-
if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.currentURL)) {
297+
if (element = activateElement(container.querySelector(`turbo-frame:not([disabled])[src][recurse~=${id}]`), this.currentURL)) {
298298
await element.loaded
299299
return await this.extractForeignFrameElement(element)
300300
}

‎src/tests/fixtures/frames.html

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,15 @@ <h2>Frames: #nested-child</h2>
100100
<a id="eval-false-script-link" href="/src/tests/fixtures/frames/eval_false_script.html">data-turbo-eval=false script</a></p>
101101
</turbo-frame>
102102

103+
<turbo-frame id="disabled" src="/src/tests/fixtures/frames/disabled.html">
104+
</turbo-frame>
105+
103106
<turbo-frame id="recursive" recurse="composer" src="/src/tests/fixtures/frames/recursive.html">
104107
</turbo-frame>
105108

109+
<turbo-frame id="disabled_recursive" recurse="disabled_composer" src="/src/tests/fixtures/frames/disabled_recursive.html">
110+
</turbo-frame>
111+
106112
<a id="frame-self" href="/src/tests/fixtures/frames/self.html" data-turbo-frame="frame">Visit self.html</a>
107113

108114
<a id="navigate-form-redirect" href="/src/tests/fixtures/frames/form-redirect.html" data-turbo-frame="form-redirect">Visit form-redirect.html</a>

‎src/tests/fixtures/frames/disabled.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Disabled Frame</title>
6+
<script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
7+
</head>
8+
<body>
9+
<turbo-frame id="disabled" disabled>
10+
<h1>Frame: #disabled loaded</h1>
11+
</turbo-frame>
12+
</body>
13+
</html>

‎src/tests/fixtures/frames/disabled_recursive.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Disabled Recursive Frame</title>
6+
<script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
7+
</head>
8+
<body>
9+
<turbo-frame id="disabled_recursive" disabled>
10+
<h2>Frame: #disabled_recursive loaded</h2>
11+
<turbo-frame id="disabled_composer">
12+
<h2>Frame: #disabled_composer loaded</h2>
13+
</turbo-frame>
14+
</turbo-frame>
15+
</body>
16+
</html>

‎src/tests/functional/frame_tests.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,12 @@ export class FrameTests extends TurboDriveTestCase {
146146
this.assert.ok(await this.querySelector("#recursive details:not([open])"))
147147
}
148148

149+
async "test loading a page with a <turbo-frame disabled recurse> does not lazily loads the matching frame"() {
150+
await this.nextBeat
151+
152+
this.assert.notOk(await this.hasSelector("#disabled_recursive h2"))
153+
}
154+
149155
async "test submitting a form that redirects to a page with a <turbo-frame recurse> which lazily loads a matching frame"() {
150156
await this.nextBeat
151157
await this.clickSelector("#recursive summary")
@@ -156,6 +162,12 @@ export class FrameTests extends TurboDriveTestCase {
156162
this.assert.ok(await this.querySelector("#recursive details:not([open])"))
157163
}
158164

165+
async "test loading a page with a <turbo-frame disabled> does not lazily load the matching frame"() {
166+
await this.nextBeat
167+
168+
this.assert.notOk(await this.hasSelector("#disabled h2"))
169+
}
170+
159171
async "test removing [disabled] attribute from eager-loaded frame navigates it"() {
160172
await this.remote.execute(() => document.getElementById("frame")?.setAttribute("disabled", ""))
161173
await this.remote.execute((src: string) => document.getElementById("frame")?.setAttribute("src", "/src/tests/fixtures/frames/frame.html"))
@@ -205,8 +217,7 @@ export class FrameTests extends TurboDriveTestCase {
205217
async "test 'turbo:frame-render' is triggered after frame has finished rendering"() {
206218
await this.clickSelector("#frame-part")
207219

208-
await this.nextEventNamed("turbo:frame-render") // recursive
209-
const { fetchResponse } = await this.nextEventNamed("turbo:frame-render")
220+
const { fetchResponse } = await this.nextEventOnTarget("part", "turbo:frame-render")
210221

211222
this.assert.include(fetchResponse.response.url, "/src/tests/fixtures/frames/part.html")
212223
}

0 commit comments

Comments
 (0)