Fix page loads when refreshing location with anchor (#324)

* Fix same-page replace visits. The likelihood is that a same-page replace visit will want to load a fresh version from the server * Test refreshing page with replace link * Blank anchors have no element. An alternative to #268 * Fix page loads when refreshing location with anchor. Update the same-page check, making it possible to refresh a location such as example.com#main
hotwired · Aug 6, 2021 · d45bf3f · d45bf3f
1 parent f04e25b
commit d45bf3f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/core/drive/navigator.ts b/src/core/drive/navigator.ts
@@ -121,8 +121,13 @@ export class Navigator {
   }
 
   locationWithActionIsSamePage(location: URL, action?: Action): boolean {
-    return getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) &&
-      (getAnchor(location) != null || action == "restore")
+    const anchor = getAnchor(location)
+    const currentAnchor = getAnchor(this.view.lastRenderedLocation)
+    const isRestorationToTop = action === 'restore' && typeof anchor === 'undefined'
+
+    return action !== "replace" &&
+      getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation) &&
+      (isRestorationToTop || (anchor != null && anchor !== currentAnchor))
   }
 
   visitScrolledToSamePageLocation(oldURL: URL, newURL: URL) {

diff --git a/src/core/snapshot.ts b/src/core/snapshot.ts
@@ -14,11 +14,7 @@ export class Snapshot<E extends Element = Element> {
   }
 
   getElementForAnchor(anchor: string | undefined) {
-    try {
-      return this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`)
-    } catch {
-      return null
-    }
+    return anchor ? this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`) : null
   }
 
   get isConnected() {

diff --git a/src/tests/fixtures/navigation.html b/src/tests/fixtures/navigation.html
@@ -9,6 +9,8 @@
   <body>
     <a href="#main">Skip Link</a>
 
+    <a href="#main" id="refresh-link" data-turbo-action="replace">Refresh Link</a>
+
     <a href="#ignored-link" id="ignored-link">Skipped Content</a>
 
     <section id="main" style="height: 200vh">

diff --git a/src/tests/functional/navigation_tests.ts b/src/tests/functional/navigation_tests.ts
@@ -163,6 +163,12 @@ export class NavigationTests extends TurboDriveTestCase {
     this.assert.ok(await this.selectorHasFocus("#main a:first-of-type"), "skips to first interactive element after #main")
   }
 
+  async "test same-page anchored replace link assumes the intention was a refresh"() {
+    await this.clickSelector('#refresh-link')
+    await this.nextBody
+    this.assert.ok(await this.isScrolledToSelector("#main"), "scrolled to #main")
+  }
+
   async "test navigating back to anchored URL"() {
     await this.clickSelector('a[href="#main"]')
     await this.nextBeat