Page MenuHomePhabricator

Alert the user when navigating away with unsaved changes
Closed, ResolvedPublic

Description

background

When a user attempts to navigate away from an unsaved form, they will lose anything in progress.

user story

Given that a user has selected anything in the form or added characters to a text field, when they attempt to navigate from the page, then a browser dialog should appear, and they should be able to continue (and lose their edits) or go back to the form to publish

requirements

When a user navigates away from a page, a dialog should appear

  • by pressing "continue" their edits are discarded
  • by pressing "go back" they should see the form

Derived Requirement

Ensure a browser dialog appears when a user attempts to navigate away from a page with unsaved changes, allowing them to continue navigating or return to the form.

BDD

Feature: Unsaved Changes Warning

Scenario: Alert user when navigating away with unsaved changes

Given the user has unsaved changes on a form
When the user attempts to navigate away from the page
Then a browser dialog should appear allowing them to continue navigating or return to the form
Test Steps

Test Case 1: Alert User When Navigating Away with Unsaved Changes

Open https://wishlist-test.toolforge.org/wiki/Community_Wishlist/Intake and navigate to a page with a form.
Enter data into the form fields.
Attempt to navigate away from the page.
✅❓❌⬜ AC1: Confirm that a browser dialog appears, allowing the user to continue navigating or return to the form.

QA Results - Wishlist-test.toolforge

ACStatusDetails
1T365161#9949953

Details

Other Assignee
GMikesell-WMF
TitleReferenceAuthorSource BranchDest Branch
Use mw.confirmCloseWindowrepos/commtech/wishlist-intake!126samtarT365161-2main
Check for form submit before firing beforeunloadrepos/commtech/wishlist-intake!75samtarT365161-bugfixmain
Alert the user when navigating away with unsaved changesrepos/commtech/wishlist-intake!74samtarT365161main
Customize query in GitLab

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
JWheeler-WMF updated the task description. (Show Details)

This is (sometimes) showing the prompt when submitting the form — reworking

@TheresNoTime As seen in the gifs below for staff and non-staff I did not see a dialog of "continue" or "go back" when navigating away from the page.

Test Result - Wishlist-test.toolforge

Status: ✅ PASS
Environment: Wishlist-test.toolforge
OS: macOS Sonoma 14.5
Browser: Chrome 126
Device: MBA
Emulated Device: NA

Test Artifact(s):

Test Steps

Test Case 1: Alert User When Navigating Away with Unsaved Changes

  1. Open https://wishlist-test.toolforge.org/wiki/Community_Wishlist/Intake and navigate to a page with a form.
  2. Enter data into the form fields.
  3. Attempt to navigate away from the page.

✅ AC1: Confirm that a browser dialog appears, allowing the user to continue navigating or return to the form.

StaffNon-Staff
2024-06-27_14-42-34.mp4.gif (764×1 px, 1 MB)
2024-06-27_14-44-06.mp4.gif (738×1 px, 1 MB)

Sorry, not understanding the issue here — the dialog is appearing in those two GIFs? The messaging cannot be modified.

@TheresNoTime Ok, because the description said "continue" and "go back". Since that is fine and can't be modified, I will move that to Done based on my previous testing. Thanks for all your work!