hotwired / turbo-ios

iOS framework for making Turbo native apps
MIT License
874 stars 88 forks source link

Persist visit options loads same page #224

Open davekaro opened 1 month ago

davekaro commented 1 month ago

After upgrading our app from Turbo Native 7.0.2 to 7.1.0, I noticed some different behavior with forms that redirect to other URLs. What happens is if the new page has links on it, clicking those links just re-renders the current page. If you click again, then the new page is loaded. I tracked it down to this PR when it started happening.

I was able to replicate the issue using the turbo-native-demo fairly easily, you can see the commits or reference the diff below.

Reading the diff in #155, I can see why this new behavior is happening, but I don't understand why I would want this behavior. The PR references fixing some issue with flash alerts, and https://github.com/hotwired/turbo-ios/issues/186 is referenced too which also mentions issue with flash. In my debugging, I noticed that the code referenced in #186 is in fact still being hit, but on the second visit it picks up the "unprocessed visit options" from #155, so there is no actual second request, but it seems the problem stems from this quote in #186:

Session seems to think this request is the user navigating "backwards",

Is there some other way I should be structuring redirects or handle this issue?

Here are some videos showing the difference:

Before

https://github.com/user-attachments/assets/0242f1f6-82fa-4cec-b62f-4d0226fc20de

After

https://github.com/user-attachments/assets/f6dfd8a6-e4b0-4836-8956-c7b458a960a5

Diff with my changes to turbo-native-demo that showcases the problem.

diff --git a/server.js b/server.js
index bd40580..8a76812 100644
--- a/server.js
+++ b/server.js
@@ -51,6 +51,14 @@ app.get("/", (request, response) => {
   response.render("index", { title: "Turbo Native Demo", page_class: "index" })
 })

+app.post("/submit_and_redirect", (request, response) => {
+  response.redirect("/submit_redirected");
+})
+
+app.get("/submit_redirected", (request, response) => {
+  response.render("submit_redirected", { title: "Submit redirected" });
+})
+
 app.get("/one", (request, response) => {
   response.render("one", { title: "How’d You Get Here?" })
 })
diff --git a/views/index.ejs b/views/index.ejs
index 6e46ce2..1a73573 100644
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -10,6 +10,9 @@

 <h2 class="actions__header space --top-l">Basic Features</h2>
 <div class="actions grid__item --start-2 --span-10 space --bottom-s">
+  <form action="/submit_and_redirect" method="post">
+    <button type="submit">Submit and redirect to other URL</button>
+  </form>
   <a class="actions__item" href="/one">
     <div class="actions__icon --navigate" aria-hidden="true"></div>
     Navigate to another webpage
diff --git a/views/submit_redirected.ejs b/views/submit_redirected.ejs
new file mode 100644
index 0000000..f7f98d9
--- /dev/null
+++ b/views/submit_redirected.ejs
@@ -0,0 +1,8 @@
+<h1 class="page-title">Redirected</h1>
+<p>This page is the result of a redirect from the server, from a form submission.</p>
+
+<p class="space --bottom-s --top-m">This performs an <code>advance</code> visit:</p>
+<p><a href="/two" class="button@native">Advance to another webpage</a></p>
+
+<p class="space --bottom-s">This performs a <code>replace</code> visit:</p>
+<p><a href="/two?action=replace" class="button@native" data-turbo-action="replace">Replace with another webpage</a></p>