Fix temporary elements disappearing on subsequent GET requests that r…

…edirect to a page with data-turbo-temporary elements. (#1302) * Fix temporary elements disappearing on subsequent GET requests that redirect to a page with data-turbo-temporary elements. * Apply suggestions from code review Co-authored-by: Bruno Prieto <[email protected]> * Fix lint: nextRepaint no longer needed --------- Co-authored-by: Bruno Prieto <[email protected]>
hotwired · Aug 26, 2024 · 2f7abac · 2f7abac
1 parent f48b0de
commit 2f7abac
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/src/core/drive/visit.js b/src/core/drive/visit.js
@@ -1,7 +1,7 @@
 import { FetchMethod, FetchRequest } from "../../http/fetch_request"
 import { getAnchor } from "../url"
 import { PageSnapshot } from "./page_snapshot"
-import { getHistoryMethodForAction, uuid, nextRepaint } from "../../util"
+import { getHistoryMethodForAction, uuid } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
 import { ViewTransitioner } from "./view_transitioner"
 
@@ -419,7 +419,10 @@ export class Visit {
 
  async render(callback) {
  this.cancelRender()
- this.frame = await nextRepaint()
+ await new Promise((resolve) => {
+ this.frame =
+ document.visibilityState === "hidden" ? setTimeout(() => resolve(), 0) : requestAnimationFrame(() => resolve())
+ })
  await callback()
  delete this.frame
  }

diff --git a/src/tests/fixtures/cache_observer.html b/src/tests/fixtures/cache_observer.html
@@ -12,5 +12,7 @@ <h1>Cache Observer</h1>
  <div id="temporary" data-turbo-temporary>data-turbo-temporary</div>
  <div id="temporary-with-deprecated-selector" data-turbo-cache="false">data-turbo-cache=false</div>
  <p><a id="link" href="/src/tests/fixtures/rendering.html">rendering</a></p>
+ <p><a id="redirect-here-link" href="/__turbo/redirect?path=/src/tests/fixtures/cache_observer.html">Redirection link back to here</a></p>
+ </section>
  </body>
  </html>
diff --git a/src/tests/fixtures/visit.html b/src/tests/fixtures/visit.html
@@ -21,6 +21,7 @@ <h1>Visit</h1>
  <p><a id="below-the-fold-link" href="/src/tests/fixtures/one.html">one.html</a></p>
  <hr class="push-below-fold">
  <p><a id="stream-link" href="/__turbo/stream-response?content=link&type=stream&key=value" data-turbo-stream>Stream link with ?key=value</a></p>
+ <p><a id="cache-observer-link" href="/src/tests/fixtures/cache_observer.html">Link to cache observer</a></p>
  </section>
 
  <div id="messages"></div>

diff --git a/src/tests/functional/visit_tests.js b/src/tests/functional/visit_tests.js
@@ -175,6 +175,22 @@ test("cache does not override response after redirect", async ({ page }) => {
  assert.equal(await page.locator("some-cached-element").count(), 0)
 })
 
+test("cache does not hide temporary elements on the second visit after redirect", async ({ page }) => {
+ await page.click("#cache-observer-link")
+ await nextBeat()
+ await page.click("#redirect-here-link")
+ await nextBeat() // 301 redirect response
+ await nextBeat() // 200 response
+
+ assert.equal(await page.locator("#temporary").count(), 1)
+
+ await page.click("#redirect-here-link")
+ await nextBeat() // 301 redirect response
+ await nextBeat() // 200 response
+
+ assert.equal(await page.locator("#temporary").count(), 1)
+})
+
 function cancelNextVisit(page) {
  return cancelNextEvent(page, "turbo:before-visit")
 }