Prevent user from leaving page with incomplete form

[benjaminleonard]

It's quite easy to accidentally leave the page or close a modal before you've finished filling it out. Most notably if you're on a longer form like the instance create.

To prevent this, can we ask for confirmation to discard changes from the user. Looks like this can be done with React Router Prompt.

I can work on styling for this – to be used on both the side modals and full-page forms. Looks like this uses a native prompt dialog

[benjaminleonard]

Looks like Prompt is not supported in React Router 6

[david-crespo]

As far as I can tell they're not actively working on that, but people have posted workarounds:

remix-run/react-router#8139 (comment)

[benjaminleonard]

Just saw that, looks promising!

[just-be-dev]

I'm not sure what the relative priority of this is. I added it in the first customer demo milestone given that I think @benjaminleonard is actively working on it.

[benjaminleonard]

I started experimenting in a branch to recreate Prompt – but I am running into an error. I'll have another stab at this later.

[benjaminleonard]

remix-run/react-router@bb7590a

The blocker is returning to react router 🎉

[david-crespo]

Calling it a nice to have/followup for now, open for debate. It's pretty easy to do now that they brought it back to RR.