Differences in how Hotwire Native Android and iOS handle modal navigation

[leonvogt]

Hi there,

I've noticed some differences in how Hotwire Native Android and iOS handle modal navigation. More specifically, the way they handle Server-Driven Routing.

The following reproducible examples are created using the latest v1.1.1 versions of Android and iOS, as well as the Hotwire Native Demo project.

Steps to reproduce

1. Add the following to the PathConfiguration of Android and iOS:

{
  "patterns": ["/recede_historical_location"],
  "properties": {"presentation": "pop"}
},
{
  "patterns": ["/resume_historical_location"],
  "properties": {"presentation": "none"}
},
{
  "patterns": ["/refresh_historical_location"],
  "properties": {"presentation": "refresh"}
}

2. Prepare the Demo Server.
   Either use my prepared branch of the Hotwire Native Demo project or add the following:

server.js

+ app.use(express.urlencoded({ extended: true })); // To parse the form data

app.post("/new", (request, response) => {
- response.redirect("/success")
+  switch (request.body?.action) {
+    case "refresh":
+      response.redirect("/refresh_historical_location")
+      break
+    case "recede":
+      response.redirect("/recede_historical_location")
+      break
+    case "resume":
+      response.redirect("/resume_historical_location")
+      break
+    default:
+      response.redirect("/new")
+  }
})

+ app.get("/recede_historical_location", (request, response) => {
+   response.render("success", { title: "Dummy" })
+ })

+ app.get("/resume_historical_location", (request, response) => {
+   response.render("success", { title: "Dummy" })
+ })

+ app.get("/refresh_historical_location", (request, response) => {
+   response.render("success", { title: "Dummy" })
+ })

views/new.ejs

<form method="post">
- <button type="submit">Submit Form</button>
+  <button type="submit" name="action" value="refresh">Submit and redirect to /refresh</button>
+  <button type="submit" name="action" value="recede">Submit and redirect to /recede</button>
+  <button type="submit" name="action" value="resume">Submit and redirect to /resume</button>
</form>

views/one.ejs

<p><a href="/new" class="button@native">Open Modal</a></p>

---

Opening a modal from index.ejs (one fragment on the stack):

1. presentation: NONE
   When the form is submitted and the server redirects to /resume_historical_location, Android pops the modal and refreshes the page below it. (iOS neither pops the modal nor refreshes the screen below it; it does nothing.)

2. presentation: POP
   When the form is submitted and the server redirects to /recede_historical_location, Android pops the modal and freezes.

Opening a modal from one.ejs (two fragments on the stack):

1. presentation: POP
   When the form is submitted and the server redirects to /recede_historical_location, Android not only pops the modal but also the previous fragment. It also refreshes the screen below it. (iOS only pops the modal, with no refresh.)

Demo Server logs from Android:

POST /new
GET /recede_historical_location
GET /

Demo Server logs from iOS:

POST /new
GET /recede_historical_location

2. presentation: NONE
   When the form is submitted and the server redirects to /resume_historical_location, Android pops the modal and refreshes the screen below it. (iOS neither pops the modal nor refreshes the screen below it; it does nothing.)

Demo Server logs from Android:

POST /new
GET /resume_historical_location
GET /one

Demo Server logs from iOS:

POST /new
GET /resume_historical_location

Let me know if I can provide any further details or clarify anything to help understand this behavior better.