In this episode, we're taking a closer look at how to keep our form state persistent, even when navigating between pages or hiding/showing the form. We start by importing useForm from Inertia and setting up our form state inside a composable (alongside the visible ref from before). By doing this, the form's data sticks around, so users won't lose what they've typed if they navigate away or close the form temporarily.
We walk through hooking up the new form state to all parts of our create discussion form—title, topic, and body—using proper bindings. There are some tweaks to placeholders and error handling, so validation messages show up like they do on other forms we have.
After wiring everything up, we test the form state by filling in values, navigating around, closing and reopening the form, and confirming that all answers stay put. There's a hiccup with the custom select component not binding correctly, so we temporarily swap it with a regular HTML select. We make a note to fix the custom select later, but for now, everything else is working how we want.
By the end of this episode, our form feels a lot more robust and user-friendly, keeping users' input safe no matter where they go in the app.