Treat same-page anchor Visit

Closes hotwired#400 Invoke `Visit.goToSamePageAnchor()` earlier in the `BrowserAdapter.visitStarted()` delegate method. If a `Visit` is to an anchor on the same page, invoke it at the same time a simulated request that's pre-populated from a `VisitResponse` instance in the hopes that the asynchronous Visit delegate callbacks won't be in competition with the same-page scrolling asynchrony.
seanpdoyle · Nov 26, 2021 · ef92095 · ef92095
1 parent aa9724d
commit ef92095
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/src/core/drive/visit.ts b/src/core/drive/visit.ts
@@ -174,6 +174,8 @@ export class Visit implements FetchRequestDelegate {
   issueRequest() {
     if (this.hasPreloadedResponse()) {
       this.simulateRequest()
+    } else if (this.isSamePage) {
+      this.goToSamePageAnchor()
     } else if (this.shouldIssueRequest() && !this.request) {
       this.request = new FetchRequest(this, FetchMethod.get, this.location)
       this.request.perform()

diff --git a/src/core/native/browser_adapter.ts b/src/core/native/browser_adapter.ts
@@ -24,7 +24,6 @@ export class BrowserAdapter implements Adapter {
     visit.loadCachedSnapshot()
     visit.issueRequest()
     visit.changeHistory()
-    visit.goToSamePageAnchor()
   }
 
   visitRequestStarted(visit: Visit) {

diff --git a/src/tests/fixtures/visit.html b/src/tests/fixtures/visit.html
@@ -5,13 +5,19 @@
     <title>Turbo</title>
     <script src="/dist/turbo.es2017-umd.js" data-turbo-track="reload"></script>
     <script src="/src/tests/fixtures/test.js"></script>
+    <style>
+      .push-below-fold { margin-top: 100vh; }
+    </style>
   </head>
   <body>
     <section>
       <h1>Visit</h1>
       <p><a id="same-origin-link" href="/src/tests/fixtures/one.html">Same-origin link</a></p>
       <p><a id="same-origin-link-search-params" href="/src/tests/fixtures/one.html?key=value">Same-origin link with ?key=value</a></p>
       <p><a id="sample-response" href="/src/tests/fixtures/one.html">Sample response</a></p>
+      <p><a id="same-page-link" href="/src/tests/fixtures/visit.html">Same page link</a></p>
+      <hr class="push-below-fold">
+      <p><h1 id="below-the-fold-heading">Same page heading</h1></p>
     </section>
   </body>
 </html>
diff --git a/src/tests/functional/visit_tests.ts b/src/tests/functional/visit_tests.ts
@@ -120,6 +120,30 @@ export class VisitTests extends TurboDriveTestCase {
     this.assert.notOk(await this.hasSelector("some-cached-element"))
   }
 
+  async "can scroll to element after turbo:visit"() {
+    const id = "below-the-fold-heading"
+    await this.evaluate((id: string) => {
+      addEventListener("turbo:load",
+        () => document.getElementById(id)?.scrollIntoView(),
+        { once: true }
+      )
+    }, id)
+
+    this.assert(await this.isScrolledToTop, "starts unscrolled")
+
+    await this.clickSelector("#same-page-link")
+    await this.nextEventNamed("turbo:load")
+
+    this.assert(await this.isScrolledToSelector("#" + id), "scrolls after turbo:load")
+
+    await this.clickSelector("#same-origin-link")
+    await this.nextEventNamed("turbo:load")
+    await this.goBack()
+    await this.nextEventNamed("turbo:load")
+
+    this.assert(await this.isScrolledToSelector("#" + id), "scrolls after turbo:load")
+  }
+
   async visitLocation(location: string) {
     this.remote.execute((location: string) => window.Turbo.visit(location), [location])
   }