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 18, 2021 · 6eb8444 · 6eb8444
1 parent 6aba5c6
commit 6eb8444
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
@@ -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)
       }

diff --git a/src/tests/fixtures/frames.html b/src/tests/fixtures/frames.html
@@ -110,6 +110,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
@@ -148,6 +148,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")
@@ -158,6 +164,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"))
@@ -207,8 +219,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")
   }