Make WordPress Core

Opened 7 years ago

Last modified 5 hours ago

#40493 accepted enhancement

On the Edit User Profile page, prevent losing data when clicking links

Reported by: ashokrane's profile ashokrane Owned by: joedolson's profile joedolson
Milestone: 6.6 Priority: normal
Severity: normal Version:
Component: Users Keywords: target-blank has-patch
Focuses: accessibility, javascript Cc:

Description

On the Edit User Profile, open the "You can change your profile picture on Gravatar." link in a new window.
Reason being that otherwise it causes the user to loose any data that they have edited in the form, but not yet saved.

Attachments (4)

40493.diff (1.3 KB) - added by karlijnbk 4 years ago.
40493.2.diff (1.1 KB) - added by jwgoedert 5 hours ago.
updated 40493 diff file
40493warning.png (266.7 KB) - added by jwgoedert 5 hours ago.
40493 Warning after edits and redirect
40493warning.2.png (266.7 KB) - added by jwgoedert 5 hours ago.
40493 Warning after edits and redirect

Download all attachments as: .zip

Change History (17)

#1 @swissspidy
7 years ago

  • Keywords target-blank added

Hey there,

Thanks for your report and welcome!

As per #23432, we rather strive to remove usage of target="_blank". As for losing data, the browser should warn you when you're about to leave a page without having saved the form.

See https://core.trac.wordpress.org/query?keywords=~target-blank for related tickets.

#2 @ashokrane
7 years ago

Thanks @swissspidy. I agree. The browser didn't throw any warning when I have unsaved data & when I clicked on the "Gravatar" text. Doing that would be a better approach then opening in a new window (after going through other related tickets).

#3 @ajmaurya
7 years ago

  • Keywords reporter-feedback added

Hey i also once had the same thought on opening the Gravatar link in a new window, but after reading this it totally makes much more sense now.

#4 @afercia
5 years ago

  • Focuses accessibility added

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


5 years ago

#6 @afercia
5 years ago

  • Keywords needs-patch added; reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release
  • Version 4.7.3 deleted

Discussed during today's accessibility bug-scrub, agreed this form would need the JS confirm to warn users they can lose data when navigating away. No target _blank please :)

@karlijnbk
4 years ago

#7 @karlijnbk
4 years ago

Regarding the patch above, please also give props to @diedeexterkate.

The patch above fixes the issue on the user edit pages and "add new user" page. We tested this on Chrome, Edge, Firefox and Safari on macOS.
Important to note that in Safari this does not work. We think this is due to back-forward caching (see https://stackoverflow.com/questions/40938707/safari-onbeforeunload/41769343).

#8 @Mista-Flo
4 years ago

  • Keywords has-patch added; needs-patch removed

#9 @sabernhardt
18 months ago

  • Focuses javascript added
  • Keywords needs-refresh added
  • Summary changed from On the Edit User Profile, open the "You can change your profile picture on Gravatar." link in a new window to On the Edit User Profile page, prevent losing data when clicking links

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.


6 weeks ago

#11 @joedolson
6 weeks ago

  • Milestone changed from Future Release to 6.6
  • Owner set to joedolson
  • Status changed from new to accepted

Looking at this for 6.6, and as a requirement to resolve #60100.

This ticket was mentioned in PR #6424 on WordPress/wordpress-develop by jwgoedert.


5 hours ago
#12

  • Keywords needs-refresh removed

Verified @karlijnbk patch:

Added isSubmitting boolean, and form variables for tracking changes
Added initial form check.
Added conditional in 'beforeunload' check to handle redirects and present 'Changes that you made may not be saved.' warning message.

Trac ticket:
https://core.trac.wordpress.org/ticket/40493

@jwgoedert
5 hours ago

updated 40493 diff file

@jwgoedert
5 hours ago

40493 Warning after edits and redirect

@jwgoedert
5 hours ago

40493 Warning after edits and redirect

#13 @jwgoedert
5 hours ago

Submitted PR and included screenshots(accidentally added two, need to remove one...)
Verification of patch and efforts from work of @karlijnbk @diedeexterkate

New Diff attached and PR link below.

https://github.com/WordPress/wordpress-develop/pull/6424

Note: See TracTickets for help on using tickets.