search

ditdot-dev / vue-flow-form

Create conversational conditional-logic forms with Vue.js.
https://www.ditdot.hr/en/vue-flow-form
MIT License
779 stars 174 forks source link

Bug: Refreshing on a mobile browser does not show warning prompt and causes data to be lost #218

Closed coxlr closed 2 years ago

coxlr commented 2 years ago

Describe the bug When you refresh the page using a mobile browser after the first question it does not show warning prompt and therefore refreshes and data is lost. This happens If you use pull to refresh using chrome mobile browser, or using the refresh button in the URL bar on Safari and FireFox

To Reproduce Take a survey on a mobile device and answer the first question, this will take you to the next question. If you refresh/reload the page it will not show a warning prompt and will lose your data.

Expected behavior If on any question apart from the first one and the page is refreshed/reloaded, it should prompt and warn the user that their data will be lost if they continue, and give them the option to cancel.

Screenshots Here is a video showing what currently happens on Chrome when you pull to refresh on the second question.

https://user-images.githubusercontent.com/8451762/135539654-a56bfaf9-b9df-40a5-bee0-5b439325c18d.MP4

Here is a video showing what currently happens on Safari when you click the reload button in the URL bar.

https://user-images.githubusercontent.com/8451762/135539660-5fb18ed7-7ce5-42fc-a294-ac036186fdb3.MP4

Desktop (please complete the following information):

spinn commented 2 years ago

Hi @coxlr,

we are using a standard implementation of the beforeunload event, although we are not quite sure about iOS support for this event. If you know of a solution that reliably works on iOS let us know and we'll consider implementing it.

coxlr commented 2 years ago

I spent time looking in to and researching all the various options for this prior to raising the issue. Unfortunately I was also unable to find and implement a working solution for iOS