Skip to content

Adding a js confirmation before navigating away from settings menus #10927

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anukasha-mo wants to merge 9 commits into
base: trunk
Choose a base branch
from
Open

Adding a js confirmation before navigating away from settings menus #10927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fed6b2c
adding a js confirmation before navigating away from settings menus
anukasha-mo Feb 13, 2026
8de9d1d
data-loss64623-stash
anukasha-mo Apr 3, 2026
15603f6
Merge remote-tracking branch 'upstream/trunk' into 64623-data-loss-pr…
anukasha-mo Apr 14, 2026
9b372c0
resolving pr comments - using conditional beforeunload
anukasha-mo Apr 14, 2026
ecb5403
removing .idea files
anukasha-mo Apr 14, 2026
5a91d7d
removing not-my-changes
anukasha-mo Apr 14, 2026
48796bf
fixing spaces
anukasha-mo Apr 14, 2026
eaa41ce
correcting enqueue script handle name
anukasha-mo Apr 14, 2026
e50fd06
renaming js file to wp-options-unsaved-changes-confirmation.js
anukasha-mo Apr 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,7 @@ module.exports = function(grunt) {
[ WORKING_DIR + 'wp-admin/js/theme-plugin-editor.js' ]: [ './src/js/_enqueues/wp/theme-plugin-editor.js' ],
[ WORKING_DIR + 'wp-admin/js/theme.js' ]: [ './src/js/_enqueues/wp/theme.js' ],
[ WORKING_DIR + 'wp-admin/js/updates.js' ]: [ './src/js/_enqueues/wp/updates.js' ],
[ WORKING_DIR + 'wp-admin/js/wp-options-unsaved-changes-confirmation.js' ]: [ './src/js/_enqueues/admin/wp-options-unsaved-changes-confirmation.js' ],
[ WORKING_DIR + 'wp-admin/js/user-profile.js' ]: [ './src/js/_enqueues/admin/user-profile.js' ],
[ WORKING_DIR + 'wp-admin/js/user-suggest.js' ]: [ './src/js/_enqueues/lib/user-suggest.js' ],
[ WORKING_DIR + 'wp-admin/js/widgets/custom-html-widgets.js' ]: [ './src/js/_enqueues/wp/widgets/custom-html.js' ],
Expand Down Expand Up @@ -1192,6 +1193,7 @@ module.exports = function(grunt) {
'src/wp-admin/js/theme-plugin-editor.js': 'src/js/_enqueues/wp/theme-plugin-editor.js',
'src/wp-admin/js/theme.js': 'src/js/_enqueues/wp/theme.js',
'src/wp-admin/js/updates.js': 'src/js/_enqueues/wp/updates.js',
'src/wp-admin/js/wp-options-unsaved-changes-confirmation.js': 'src/js/_enqueues/admin/wp-options-unsaved-changes-confirmation.js',
'src/wp-admin/js/user-profile.js': 'src/js/_enqueues/admin/user-profile.js',
'src/wp-admin/js/user-suggest.js': 'src/js/_enqueues/lib/user-suggest.js',
'src/wp-admin/js/widgets/custom-html-widgets.js': 'src/js/_enqueues/wp/widgets/custom-html.js',
Expand Down
31 changes: 31 additions & 0 deletions src/js/_enqueues/admin/wp-options-unsaved-changes-confirmation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/* global wp */
( function () {
var form = document.querySelector( 'form[action="options.php"]' );

if ( ! form ) {
return;
}

var originalFormContent = new URLSearchParams( new FormData( form ) ).toString();
var __ = wp.i18n.__;

function beforeUnloadHandler( event ) {
var currentContent = new URLSearchParams( new FormData( form ) ).toString();
if ( originalFormContent !== currentContent ) {
event.preventDefault();
return __(
'The changes you made will be lost if you navigate away from this page.'
);
Comment on lines +15 to +18
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This beforeunload listener is added via addEventListener(), but the handler only returns a string. For beforeunload, the return value from an event listener is ignored in many browsers; you generally need to set event.returnValue (and typically still call preventDefault()) to reliably trigger the confirmation dialog. Update the handler to assign event.returnValue to the translated message (and return it if needed for older compat).

Suggested change
event.preventDefault();
return __(
'The changes you made will be lost if you navigate away from this page.'
);
var message = __(
'The changes you made will be lost if you navigate away from this page.'
);
event.preventDefault();
event.returnValue = message;
return message;

Copilot uses AI. Check for mistakes.
}
}

// Add the beforeunload listener only once a field is modified, to avoid
// breaking bfcache.
document.addEventListener( 'change', function () {
Copy link

Copilot AI Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change listener is attached to document, so any change anywhere on the page (e.g. Screen Options / Help toggles) will register a beforeunload handler and can still disable bfcache even if the settings form itself was never modified. Consider attaching the { once: true } change listener to the settings form (or its inputs) instead, so the beforeunload handler is only registered when the options form changes.

Suggested change
document.addEventListener( 'change', function () {
form.addEventListener( 'change', function () {

Copilot uses AI. Check for mistakes.
window.addEventListener( 'beforeunload', beforeUnloadHandler );
}, { once: true } );

form.addEventListener( 'submit', function () {
window.removeEventListener( 'beforeunload', beforeUnloadHandler );
} );
} )();
2 changes: 2 additions & 0 deletions src/wp-admin/options-discussion.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@
'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
);

wp_enqueue_script( 'wp-admin-unsaved-changes-confirmation' );

require_once ABSPATH . 'wp-admin/admin-header.php';
?>

Expand Down
2 changes: 2 additions & 0 deletions src/wp-admin/options-general.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@
'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
);

wp_enqueue_script( 'wp-admin-unsaved-changes-confirmation' );

require_once ABSPATH . 'wp-admin/admin-header.php';
?>

Expand Down
2 changes: 2 additions & 0 deletions src/wp-admin/options-media.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@
'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
);

wp_enqueue_script( 'wp-admin-unsaved-changes-confirmation' );

require_once ABSPATH . 'wp-admin/admin-header.php';

?>
Expand Down
2 changes: 2 additions & 0 deletions src/wp-admin/options-permalink.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,8 @@
get_current_screen()->set_help_sidebar( $help_sidebar_content );
unset( $help_sidebar_content );

wp_enqueue_script( 'wp-admin-unsaved-changes-confirmation' );

$home_path = get_home_path();
$iis7_permalinks = iis7_supports_permalinks();
$permalink_structure = get_option( 'permalink_structure' );
Expand Down
2 changes: 2 additions & 0 deletions src/wp-admin/options-reading.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@
'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
);

wp_enqueue_script( 'wp-admin-unsaved-changes-confirmation' );

require_once ABSPATH . 'wp-admin/admin-header.php';
?>

Expand Down
1 change: 1 addition & 0 deletions src/wp-admin/options-writing.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@
);

wp_enqueue_script( 'user-profile' );
Copy link
Copy Markdown
Member

@westonruter westonruter Feb 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not enqueue user-profile anymore?

Copy link
Copy Markdown
Author

@anukasha-mo anukasha-mo Apr 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we do need to enqueue user-profile as well, re-added it

wp_enqueue_script( 'wp-admin-unsaved-changes-confirmation' );

require_once ABSPATH . 'wp-admin/admin-header.php';
?>
Expand Down
3 changes: 3 additions & 0 deletions src/wp-includes/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1260,6 +1260,9 @@ function wp_default_scripts( $scripts ) {

$scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );

$scripts->add( 'wp-admin-unsaved-changes-confirmation', "/wp-admin/js/wp-options-unsaved-changes-confirmation$suffix.js", array( 'wp-i18n' ), false, 1 );
$scripts->set_translations( 'wp-admin-unsaved-changes-confirmation' );

$scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );

$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array( 'hoverintent-js' ), false, 1 );
Expand Down
Loading