feat: block navigation on public form page when form is dirty

[darrelhong]

Closes #4793

the existing useNavigationPrompt can be used to fulfill the goal of preventing accidental navigation after form is modified.

Currently the implementation simply uses the isDirty variable provided useForm.formState to determine if navigation should be blocked. When a text field is touched and unfocused with no input change, it is considered dirty already, so if that is not the desired behaviour, further logic is needed perhaps similar to holdingStateDate in the form builder. One very important consideration here is I'm not sure if there is a situation when the isDirty=true but navigation is actually allowed.

Other than the submit button and switch to react, the public form page should not have any links that redirects the page using react-router (might be wrong here, need more context), so the only way of exiting the page is using browser functions. Thus instead of using the underlying react-router-dom functions, native web apis can be used instead for simplicity. The functionality remains the same in my testing.

The user flow for switch to react is also affected as the prompt will be shown after the feedback modal. Not sure if this is desirable and whats the best way to go about this, perhaps there is an easy way to transfer data when switching to angular?

Another solution could be to simply save responses localstorage and do away with prompts which might not be the best UX.

[darrelhong]

@wanlingt will close this PR if its not needed anymore

[wanlingt]

@wanlingt will close this PR if its not needed anymore

Hi @darrelhong , thanks for your work on this and apologies for taking a while to get to your PR. Displaying the prompt when clicking switch back to angular might cause some confusion to users, additionally there are other links in the form footer that navigate away from the page. We could limit this to the back and forward button events for now, let me know what you think!

[darrelhong]

@wanlingt luckily it looks like all the footer links open in a new tab, so navigation is not affected. For the case of switching to angular, I have updated to not block navigation.

[darrelhong]

@wanlingt any update on this? would like to get it merged if possible

[foochifa]

Heya @darrelhong we will be removing angular and the feedback modal #6190! Thanks for your contribution, but will be closing this!