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 21, 2021 · ed273ca · ed273ca
1 parent 2007d53
commit ed273ca
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 4 deletions.
diff --git a/src/core/frames/frame_controller.ts b/src/core/frames/frame_controller.ts
@@ -291,11 +291,11 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
     const id = CSS.escape(this.id)
 
     try {
-      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, fetchResponse)
       }

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/fixtures/loading.html b/src/tests/fixtures/loading.html
@@ -19,6 +19,12 @@
       <turbo-frame id="frame" src="/src/tests/fixtures/frames/frame.html" loading="eager"></turbo-frame>
     </details>
 
+    <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>
+
     <p><a id="one" href="one.html">One</a></p>
   </body>
 </html>
diff --git a/src/tests/functional/frame_tests.ts b/src/tests/functional/frame_tests.ts
@@ -217,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")
   }

diff --git a/src/tests/functional/loading_tests.ts b/src/tests/functional/loading_tests.ts
@@ -126,6 +126,18 @@ export class LoadingTests extends TurboDriveTestCase {
     const requestLogs = eventLogs.filter(([ name ]) => name == "turbo:before-fetch-request")
     this.assert.equal(requestLogs.length, 0)
   }
+
+  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 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"))
+  }
 }
 
 LoadingTests.registerSuite()