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]`.
hotwired · Nov 15, 2021 · 712516d · 712516d
1 parent 48b0f1c
commit 712516d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git a/src/core/frames/frame_controller.ts b/src/core/frames/frame_controller.ts
@@ -290,11 +290,11 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
     let element
     const id = CSS.escape(this.id)
 
-    if (element = activateElement(container.querySelector(`turbo-frame#${id}`), this.currentURL)) {
+    if (element = activateElement(container.querySelector(`turbo-frame:not([disabled])#${id}`), this.currentURL)) {
       return element
     }
 
-    if (element = activateElement(container.querySelector(`turbo-frame[src][recurse~=${id}]`), this.currentURL)) {
+    if (element = activateElement(container.querySelector(`turbo-frame:not([disabled])[src][recurse~=${id}]`), this.currentURL)) {
       await element.loaded
       return await this.extractForeignFrameElement(element)
     }

diff --git a/src/tests/fixtures/frames.html b/src/tests/fixtures/frames.html
@@ -117,6 +117,13 @@ <h2>Frames: #nested-child</h2>
       <input id="outer-frame-submit" type="submit" value="Outer form submit">
     </form>
 
+    <turbo-frame id="disabled" src="/src/tests/fixtures/frames/disabled.html">
+    </turbo-frame>
+
+    <turbo-frame id="disabled_recursive" recurse="disabled_composer" src="/src/tests/fixtures/frames/disabled_recursive.html">
+    </turbo-frame>
+
+
     <button id="propose-visit-when-frame-missing" type="button">Propose Visit when frame missing</button>
   </body>
 </html>
diff --git a/src/tests/fixtures/frames/disabled.html b/src/tests/fixtures/frames/disabled.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Disabled Frame</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+  </head>
+  <body>
+    <turbo-frame id="disabled" disabled>
+      <h1>Frame: #disabled loaded</h1>
+    </turbo-frame>
+  </body>
+</html>
diff --git a/src/tests/fixtures/frames/disabled_recursive.html b/src/tests/fixtures/frames/disabled_recursive.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Disabled Recursive Frame</title>
+    <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
+  </head>
+  <body>
+    <turbo-frame id="disabled_recursive" disabled>
+      <h2>Frame: #disabled_recursive loaded</h2>
+      <turbo-frame id="disabled_composer">
+        <h2>Frame: #disabled_composer loaded</h2>
+      </turbo-frame>
+    </turbo-frame>
+  </body>
+</html>
diff --git a/src/tests/functional/frame_tests.ts b/src/tests/functional/frame_tests.ts
@@ -146,6 +146,12 @@ export class FrameTests extends TurboDriveTestCase {
     this.assert.ok(await this.querySelector("#recursive details:not([open])"))
   }
 
+  async "test loading a page with a <turbo-frame disabled recurse> does not lazily loads the matching frame"() {
+    await this.nextBeat
+
+    this.assert.notOk(await this.hasSelector("#disabled_recursive h2"))
+  }
+
   async "test submitting a form that redirects to a page with a <turbo-frame recurse> which lazily loads a matching frame"() {
     await this.nextBeat
     await this.clickSelector("#recursive summary")
@@ -156,6 +162,12 @@ export class FrameTests extends TurboDriveTestCase {
     this.assert.ok(await this.querySelector("#recursive details:not([open])"))
   }
 
+  async "test loading a page with a <turbo-frame disabled> does not lazily load the matching frame"() {
+    await this.nextBeat
+
+    this.assert.notOk(await this.hasSelector("#disabled h2"))
+  }
+
   async "test removing [disabled] attribute from eager-loaded frame navigates it"() {
     await this.remote.execute(() => document.getElementById("frame")?.setAttribute("disabled", ""))
     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 {
   async "test 'turbo:frame-render' is triggered after frame has finished rendering"() {
     await this.clickSelector("#frame-part")
 
-    await this.nextEventNamed("turbo:frame-render") // recursive
-    const { fetchResponse } = await this.nextEventNamed("turbo:frame-render")
+    const { fetchResponse } = await this.nextEventOnTarget("part", "turbo:frame-render")
 
     this.assert.include(fetchResponse.response.url, "/src/tests/fixtures/frames/part.html")
   }