Support the case where data-turbo-frame is specified in a link in the…

… shadow DOM
hotwired · Oct 8, 2023 · 2646c26 · 2646c26
1 parent c207f5b
commit 2646c26
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/src/core/frames/link_interceptor.js b/src/core/frames/link_interceptor.js
@@ -26,10 +26,14 @@ export class LinkInterceptor {
 
   linkClicked = (event) => {
     if (this.clickEvent && this.respondsToEventTarget(event.target) && event.target instanceof Element) {
-      if (this.delegate.shouldInterceptLinkClick(event.target, event.detail.url, event.detail.originalEvent)) {
+      const linkOrCustomElement = event.target
+      const actuallyClickedLink = (linkOrCustomElement.shadowRoot && !linkOrCustomElement.hasAttribute("data-turbo-frame"))
+        ? event.composedPath()[0] : linkOrCustomElement
+
+      if (this.delegate.shouldInterceptLinkClick(actuallyClickedLink, event.detail.url, event.detail.originalEvent)) {
         this.clickEvent.preventDefault()
         event.preventDefault()
-        this.delegate.linkClickIntercepted(event.target, event.detail.url, event.detail.originalEvent)
+        this.delegate.linkClickIntercepted(actuallyClickedLink, event.detail.url, event.detail.originalEvent)
       }
     }
     delete this.clickEvent

diff --git a/src/tests/fixtures/frame_navigation.html b/src/tests/fixtures/frame_navigation.html
@@ -14,6 +14,10 @@
         Outside Frame in Shadow DOM
       </custom-link-element>
 
+      <custom-link-element id="data-turbo-frame-in-shadow-dom" link="/src/tests/fixtures/frame_navigation.html" frame="frame">
+        Data turbo frame attribute in Shadow DOM
+      </custom-link-element>
+
       <turbo-frame id="frame">
         <h2>Frame Navigation</h2>
 

diff --git a/src/tests/fixtures/test.js b/src/tests/fixtures/test.js
@@ -94,11 +94,13 @@ customElements.define(
       this.attachShadow({ mode: "open" })
     }
     connectedCallback() {
+      const frame = this.getAttribute("frame")
+
       this.shadowRoot.innerHTML = `
-      <a href="${this.getAttribute("link")}">
-        ${this.getAttribute("text") || `<slot></slot>`}
-      </a>
-    `
+        <a href="${this.getAttribute("link")}" ${frame ? `data-turbo-frame="${frame}"` : ""}>
+          ${this.getAttribute("text") || `<slot></slot>`}
+        </a>
+      `
     }
   }
 )

diff --git a/src/tests/functional/frame_navigation_tests.js b/src/tests/functional/frame_navigation_tests.js
@@ -30,6 +30,13 @@ test("test frame navigation with exterior link in Shadow DOM", async ({ page })
   await nextEventOnTarget(page, "frame", "turbo:frame-load")
 })
 
+test("test frame navigation with a data-turbo-frame in the Shadow DOM", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/frame_navigation.html")
+  await page.click("#data-turbo-frame-in-shadow-dom")
+
+  await nextEventOnTarget(page, "frame", "turbo:frame-load")
+})
+
 test("test frame navigation emits fetch-request-error event when offline", async ({ page }) => {
   await page.goto("/src/tests/fixtures/tabs.html")
   await page.context().setOffline(true)