Merge pull request #1231 from seanpdoyle/link-with-frame-child

Resolve Turbo Frame navigation bug

src/core/frames/link_interceptor.js

@@ -1,3 +1,5 @@
+import { findLinkFromClickTarget } from "../../util"
+
 export class LinkInterceptor {
   constructor(delegate, element) {
     this.delegate = delegate
@@ -17,15 +19,15 @@ export class LinkInterceptor {
   }
 
   clickBubbled = (event) => {
-    if (this.respondsToEventTarget(event.target)) {
+    if (this.clickEventIsSignificant(event)) {
       this.clickEvent = event
     } else {
       delete this.clickEvent
     }
   }
 
   linkClicked = (event) => {
-    if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
+    if (this.clickEvent && this.clickEventIsSignificant(event)) {
       if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
         this.clickEvent.preventDefault()
         event.preventDefault()
@@ -39,8 +41,10 @@ export class LinkInterceptor {
     delete this.clickEvent
   }
 
-  respondsToEventTarget(target) {
-    const element = target instanceof Element ? target : target instanceof Node ? target.parentElement : null
-    return element && element.closest("turbo-frame, html") == this.element
+  clickEventIsSignificant(event) {
+    const target = event.composed ? event.target?.parentElement : event.target
+    const element = findLinkFromClickTarget(target) || target
+
+    return element instanceof Element && element.closest("turbo-frame, html") == this.element
   }
 }

src/tests/fixtures/frames.html

@@ -37,6 +37,9 @@ <h2>Frames: #frame</h2>
       </form>
     </turbo-frame>
     <a id="outside-frame-form" href="/src/tests/fixtures/frames/form.html" data-turbo-frame="frame">Navigate #frame to /frames/form.html</a>
+    <a id="outside-frame-link-with-frame-child" href="/src/tests/fixtures/frames/form.html" data-turbo-frame="frame">
+      <turbo-frame id="ignored-frame">Has a turbo-frame child</turbo-frame>
+    </a>
 
     <a id="link-outside-frame-action-advance" href="/src/tests/fixtures/frames/frame.html" data-turbo-frame="frame" data-turbo-action="advance">Navigate #frame from outside with a[data-turbo-action="advance"]</a>
     <form id="form-get-frame-action-advance" action="/__turbo/redirect" data-turbo-frame="frame" data-turbo-action="advance">

src/tests/functional/frame_tests.js

@@ -454,6 +454,19 @@ test("'turbo:frame-render' is triggered after frame has finished rendering", asy
   assert.include(fetchResponse.response.url, "/src/tests/fixtures/frames/part.html")
 })
 
+test("navigating a frame from an outer link with a turbo-frame child fires events", async ({ page }) => {
+  await page.click("#outside-frame-link-with-frame-child")
+
+  await nextEventOnTarget(page, "frame", "turbo:before-fetch-request")
+  await nextEventOnTarget(page, "frame", "turbo:before-fetch-response")
+  const { fetchResponse } = await nextEventOnTarget(page, "frame", "turbo:frame-render")
+  expect(fetchResponse.response.url).toContain("/src/tests/fixtures/frames/form.html")
+
+  await nextEventOnTarget(page, "frame", "turbo:frame-load")
+
+  expect(await readEventLogs(page), "no more events").toHaveLength(0)
+})
+
 test("navigating a frame from an outer form fires events", async ({ page }) => {
   await page.click("#outside-frame-form")