Prevent users from losing progress on charter

[TheEgghead27]

Add a browser warning to users when they try to close or navigate away from the charter page

[SnowyNate]

I'm going to need some help on this one.

I've successfully made it so that if a FormTextField's value has been changed and isn't blank, the browser prompts the user if they try to reload or close the site, and if it is indeed blank (say a user changed their mind and deleted whatever they were typing) the browser doesn't prompt the user. The useEffect hook for the following has been commented in the code: I've also successfully been able to circumvent react router dom v6 lacking history (like history.listen) and have the website listen for if the user attempts to navigate away using the browser's navigation arrows. HOWEVER despite using if(isFormModified), the browser continues to spam the user with prompts even if isFormModified isn't true.

https://github.com/stuysu/epsilon/tree/forms-prevent-navaway <---- Link to my branch (don't mind it being behind)

[TheEgghead27]

At this moment, your code does not work in Firefox, and it is not performant, for you try to issue event listeners for each FormTextField. Testing on a Chromium browser, the code works, but with the previously mentioned caveats.

From the MDN

It is therefore recommended that developers listen for beforeunload only when users have unsaved changes so that the dialog mentioned above can be used to warn them about impending data loss, and remove the listener again when it is not needed. Listening for beforeunload sparingly can minimize the effect on performance.

I would recommend instead trying to use only one call to addEventListener(), perhaps in Create.tsx that checks each field's "emptiness" in the formData.

[SnowyNate]

Gotcha. Thanks for pointing that out, I'll keep that in mind when I start working on the site again.

[TheEgghead27]

Reopening to track the navigation case