Describe the bug
If a user edits their profile fields (name, age, blood type, etc.) and then accidentally refreshes the browser tab before clicking the Save button, all unsaved changes are lost without any warning or confirmation dialog.
To Reproduce
Steps to reproduce the behavior:
- Log in and navigate to the Profile page
- Edit one or more profile fields (for example, change the name or add allergies)
- Do not click Save
- Refresh the browser tab (F5 or Ctrl+R)
- See that all edited values are reverted to their previously saved state
Expected behavior
If the user has unsaved changes and attempts to navigate away or refresh the page, a browser confirmation dialog should appear asking if they want to leave the page and discard their changes. Alternatively, changes should be auto-saved to a draft in localStorage.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
- OS: Any
- Browser: Any
- Node.js version (run
node -v): Any
- Supabase configured? (yes/no): yes
- Relevant env vars set? (example:
VITE_SUPABASE_URL) (yes/no): yes
- Screenshot of console/network errors (if any): N/A
Additional context
This can be implemented using the beforeunload event listener or the React Router v6 useBlocker hook to detect navigation away from the page when there are unsaved changes in the form state.
@akshay0611 Could you please assign this issue to me? I would like to add unsaved changes protection to the profile edit form.
Describe the bug
If a user edits their profile fields (name, age, blood type, etc.) and then accidentally refreshes the browser tab before clicking the Save button, all unsaved changes are lost without any warning or confirmation dialog.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
If the user has unsaved changes and attempts to navigate away or refresh the page, a browser confirmation dialog should appear asking if they want to leave the page and discard their changes. Alternatively, changes should be auto-saved to a draft in localStorage.
Screenshots
If applicable, add screenshots to help explain your problem.
Environment (please complete the following information):
node -v): AnyVITE_SUPABASE_URL) (yes/no): yesAdditional context
This can be implemented using the
beforeunloadevent listener or the React Router v6useBlockerhook to detect navigation away from the page when there are unsaved changes in the form state.@akshay0611 Could you please assign this issue to me? I would like to add unsaved changes protection to the profile edit form.