search

roundhousedesigns / rise-frontend

Get To Work frontend
5 stars 0 forks source link

Detect exit intent when editing Profile, and prompt before navigating away #42

Open gaswirth opened 1 year ago

gaswirth commented 1 year ago

There is already functionality in place to detect whether a Profile has edits, currently used to enable/disable the Save button. This should be taken one more step to prompt the user before refreshing/reloading, or navigating away and losing edited form data.

stephenscript commented 1 year ago

I took a look into this and would like to propose an implementation using react-router Prompt and some native DOM events to prevent navigation away / closing if there are unsaved changes. I would use the hasEditedProfile state you mentioned to conditionally block navigation with a warning toast message.

I'm happy to claim this enhancement ticket and get to work. I'll update here as development ensues.

gaswirth commented 1 year ago

Great thought, but one issue -- I believe Prompt is only available in router v5, not v6. Let me know if you find that's not the case, but I'm fairly sure Prompt was removed after v5.

stephenscript commented 1 year ago

Ah, you're right. How strange. Looks like I'll have to build the functionality myself. More fun for me! I think I can still manage it, just with a bit more creativity. Good catch.