Don't intercept hash-only links inside frames

src/core/frames/frame_controller.js

@@ -14,7 +14,7 @@ import {
 } from "../../util"
 import { FormSubmission } from "../drive/form_submission"
 import { Snapshot } from "../snapshot"
-import { getAction, expandURL, urlsAreEqual, locationIsVisitable } from "../url"
+import { getAction, expandURL, urlsAreEqual, locationIsVisitable, isHashLink } from "../url"
 import { FormSubmitObserver } from "../../observers/form_submit_observer"
 import { FrameView } from "./frame_view"
 import { LinkInterceptor } from "./link_interceptor"
@@ -480,6 +480,10 @@ export class FrameController {
   }
 
   #shouldInterceptNavigation(element, submitter) {
+    if (isHashLink(element)) {
+      return false
+    }
+
     const id = getAttribute("data-turbo-frame", submitter, element) || this.element.getAttribute("target")
 
     if (element instanceof HTMLFormElement && !this.#formActionIsVisitable(element, submitter)) {

src/core/session.js

@@ -6,7 +6,7 @@ import { History } from "./drive/history"
 import { LinkPrefetchObserver } from "../observers/link_prefetch_observer"
 import { LinkClickObserver } from "../observers/link_click_observer"
 import { FormLinkClickObserver } from "../observers/form_link_click_observer"
-import { getAction, expandURL, locationIsVisitable } from "./url"
+import { getAction, expandURL, locationIsVisitable, isHashLink } from "./url"
 import { Navigator } from "./drive/navigator"
 import { PageObserver } from "../observers/page_observer"
 import { ScrollObserver } from "../observers/scroll_observer"
@@ -252,6 +252,7 @@ export class Session {
     return (
       this.elementIsNavigatable(link) &&
       locationIsVisitable(location, this.snapshot.rootLocation) &&
+      !isHashLink(link) &&
       this.applicationAllowsFollowingLinkToLocation(link, location, event)
     )
   }

src/core/url.js

@@ -37,6 +37,10 @@ export function getLocationForLink(link) {
   return expandURL(link.getAttribute("href") || "")
 }
 
+export function isHashLink(element) {
+  return element.getAttribute("href")?.startsWith("#") ?? false
+}
+
 export function getRequestURL(url) {
   const anchor = getAnchor(url)
   return anchor != null ? url.href.slice(0, -(anchor.length + 1)) : url.href

src/tests/fixtures/frames.html

@@ -40,6 +40,7 @@ <h2>Frames: #frame</h2>
       <button id="add-refresh-morph-to-frame" type="button">Add [refresh="morph"] to #frame</button>
       <button id="add-src-to-frame" type="button">Add [src="/src/tests/fixtures/frames.html"] to #frame so it can be reloaded</button>
       <a id="link-frame" href="/src/tests/fixtures/frames/frame.html">Navigate #frame from within</a>
+      <a id="link-hash-only" href="#anchor-target">Hash-only anchor link</a>
       <a id="link-frame-with-search-params" href="/src/tests/fixtures/frames/frame.html?key=value">Navigate #frame with ?key=value</a>
       <a id="link-nested-frame-action-advance" href="/src/tests/fixtures/frames/frame.html" data-turbo-action="advance">Navigate #frame from within with a[data-turbo-action="advance"]</a>
       <a id="link-top" href="/src/tests/fixtures/one.html" data-turbo-frame="_top">Visit one.html</a>
@@ -160,6 +161,7 @@ <h2>Frames: #nested-child</h2>
     </form>
 
     <hr class="push-off-screen">
+    <div id="anchor-target">Anchor target</div>
     <input id="below-the-fold-input">
     <a id="below-the-fold-link-frame-action" data-turbo-action="advance" data-turbo-frame="frame" href="/src/tests/fixtures/frames/frame.html">Navigate #frame</a>
 

src/tests/functional/frame_tests.js

@@ -848,6 +848,15 @@ test("a turbo-frame that has been driven by a[data-turbo-action] can be navigate
   await expect(page).toHaveURL(withPathname("/src/tests/fixtures/frames/hello.html"))
 })
 
+test("clicking a hash-only anchor link inside a frame does not navigate the frame", async ({ page }) => {
+  await page.click("#link-hash-only")
+
+  expect(await noNextEventOnTarget(page, "frame", "turbo:before-fetch-request")).toBeTruthy()
+  expect(await noNextEventNamed(page, "turbo:load")).toBeTruthy()
+  await expect(page).toHaveURL(/#anchor-target$/)
+  await expect(page.locator("#frame h2")).toHaveText("Frames: #frame")
+})
+
 test("navigating turbo-frame from within with a[data-turbo-action=advance] pushes URL state", async ({ page }) => {
   await page.click("#link-nested-frame-action-advance")
   await nextEventNamed(page, "turbo:load")