Don't render previews when morphing

Fix Error when morphing a page when visiting it for the second time #1080
hotwired · Dec 9, 2023 · 875d739 · 875d739
1 parent 098aafc
commit 875d739
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 1 deletion.
diff --git a/src/core/drive/visit.js b/src/core/drive/visit.js
@@ -84,6 +84,7 @@ export class Visit {
     this.snapshotHTML = snapshotHTML
     this.response = response
     this.isSamePage = this.delegate.locationWithActionIsSamePage(this.location, this.action)
+    this.isPageRefresh = this.view.isPageRefresh(this)
     this.visitCachedSnapshot = visitCachedSnapshot
     this.willRender = willRender
     this.updateHistory = updateHistory
@@ -249,7 +250,7 @@ export class Visit {
       const isPreview = this.shouldIssueRequest()
       this.render(async () => {
         this.cacheSnapshot()
-        if (this.isSamePage) {
+        if (this.isSamePage || this.isPageRefresh) {
           this.adapter.visitRendered(this)
         } else {
           if (this.view.renderPromise) await this.view.renderPromise

diff --git a/src/tests/fixtures/one.html b/src/tests/fixtures/one.html
@@ -14,6 +14,7 @@ <h1>One</h1>
     <a name="named-anchor"></a>
     <div id="element-id" style="margin-top: 1em; height: 200vh">An element with an ID</div>
     <p><a id="redirection-link" href="/__turbo/redirect?path=/src/tests/fixtures/visit.html">Redirection link</a></p>
+    <p><a id="page-refresh-link" data-turbo-action="replace" href="/src/tests/fixtures/page_refresh.html">Page refresh link</a></p>
 
     <turbo-frame id="navigate-top">
       Replaced only the frame

diff --git a/src/tests/fixtures/page_refresh.html b/src/tests/fixtures/page_refresh.html
@@ -47,6 +47,7 @@ <h3>Element with Stimulus controller</h3>
     </div>
 
     <p><a id="replace-link" data-turbo-action="replace" href="/src/tests/fixtures/page_refresh.html?param=something">Link with params to refresh the page</a></p>
+    <p><a id="refresh-link" data-turbo-action="replace" href="/src/tests/fixtures/page_refresh.html">Link to the same page</a></p>
     <p><a id="link" href="/src/tests/fixtures/one.html">Link to another page</a></p>
 
     <form id="form" action="/__turbo/refresh" method="post" class="redirect">

diff --git a/src/tests/functional/page_refresh_tests.js b/src/tests/functional/page_refresh_tests.js
@@ -192,6 +192,20 @@ test("renders unprocessable entity responses with morphing", async ({ page }) =>
   assert.notOk(await hasSelector(page, "#frame form.reject"), "replaces entire page")
 })
 
+test("doesn't render previews when morphing", async ({ page }) => {
+  await page.goto("/src/tests/fixtures/page_refresh.html")
+
+  await page.click("#link")
+  await page.click("#page-refresh-link")
+  await page.click("#refresh-link")
+  await nextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+  await noNextEventNamed(page, "turbo:render", { renderMethod: "morph" })
+  await nextBody(page)
+
+  const title = await page.locator("h1")
+  assert.equal(await title.textContent(), "Page to be refreshed")
+})
+
 async function assertPageScroll(page, top, left) {
   const [scrollTop, scrollLeft] = await page.evaluate(() => {
     return [