Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issues with history navigation / useForm remember functionality #2226

Open
Mlekar opened this issue Feb 3, 2025 · 0 comments
Open

Issues with history navigation / useForm remember functionality #2226

Mlekar opened this issue Feb 3, 2025 · 0 comments

Comments

@Mlekar
Copy link

Mlekar commented Feb 3, 2025

  • @inertiajs/vue3 version: 2.0.x
  • laravel/framework version: 11.41.3
  • inertiajs/inertia-laravel version 2.0.0

Ever since we've migrated our apps to Inertia version 2.x, we've noticed / had the following issues:

  • History navigation (back button) no longer behaves like it did in Inertia ver. 1.x

For example, in a web app with a customers.index and customers.{id}.edit page, you make the following visits:
customers.index -> customers.edit (ID 2 so customers.2.edit) -> Back -> customers.edit (ID 3 so customers.3.edit)

When using Inertia 1.x, when you navigated back from the final page (customers.3.edit), you landed back on the customers.index page as expected
When using Inertia 2.x when you navigate back from the final page, you instead land on the customers.2.edit page (and upon further pressing back, it just completely skips over ever navigating you back to the customers.index page).

We've also had issues with the useForm remember functionality, because sometimes when you refresh / rebuild your app, the form no longer gets populated with the prop data, but always just populates with the data that it remembered at some point (which is then fixed with a hard refresh or multiple refreshes of the website)

Example form on our customers.edit page:

props: {
  customer: Object
},
data() {
  return {
    form: useForm('UpdateCustomerForm', {
        customer_type_id: this.customer.customer_type_id,
        name: this.customer.name,
        phone_number: this.customer.phone_number,
        email: this.customer.email,
        tax_payer_type_id: this.customer.tax_payer_type_id,
        tax_number: this.customer.tax_number,
        registration_number: this.customer.registration_number,
        country_id: this.customer.country_id,
        address: this.customer.address,
        postal_code: this.customer.postal_code,
        city: this.customer.city,
        notes: this.customer.notes
    })
  }
}

So upon refreshing / rebuilding the app, on navigation to the customers.edit page, you'd expect the form to be filled with the data from the prop, but instead of that it's filled with the data it remembered at some point (image from Vue devtools below).

Image

Steps to reproduce:

Deploy an app with a customers.index and a customers.edit page (or similar), and then compare the navigation (via browser back button) between Inertia 1 and 2. When doing navigation from customers.index -> customers.2.edit -> back -> customers.3.edit -> back, it will skip the customers.index page, go directly to customers.2.edit page, and upon refreshing the page, the remember bug will most likely occur.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant