resolving pr comments - using conditional beforeunload

Author: anukasha-mo

src/js/_enqueues/admin/options.js

@@ -1,53 +1,31 @@
-( function ( $ ) {
-	var $form,
-		originalFormContent,
-		isSubmitting = false,
-		hasListener = false,
-		__ = wp.i18n.__;
+/* global wp */
+( function () {
+	var form = document.querySelector( 'form[action="options.php"]' );
 
-	function beforeUnloadHandler() {
-		if ( isSubmitting || ! $form || ! $form.length ) {
-			return;
-		}
+	if ( ! form ) {
+		return;
+	}
 
-		if ( originalFormContent !== $form.serialize() ) {
+	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.'
 			);
 		}
 	}
 
-	function addBeforeUnloadListener() {
-		if ( ! hasListener ) {
-			$( window ).on( 'beforeunload.options', beforeUnloadHandler );
-			hasListener = true;
-		}
-	}
-
-	function removeBeforeUnloadListener() {
-		if ( hasListener ) {
-			$( window ).off( 'beforeunload.options' );
-			hasListener = false;
-		}
-	}
-
-	$( function () {
-		$form = $( 'form[action="options.php"]' );
-
-		if ( ! $form.length ) {
-			return;
-		}
-
-		originalFormContent = $form.serialize();
-
-		// Add listener only when form is modified
-		$form.on( 'change input', function () {
-			addBeforeUnloadListener();
-		} );
+	// Add the beforeunload listener only once a field is modified, to avoid
+	// breaking bfcache.
+	document.addEventListener( 'change', function () {
+		window.addEventListener( 'beforeunload', beforeUnloadHandler );
+	}, { once: true } );
 
-		$form.on( 'submit', function () {
-			isSubmitting = true;
-			removeBeforeUnloadListener();
-		} );
+	form.addEventListener( 'submit', function () {
+		window.removeEventListener( 'beforeunload', beforeUnloadHandler );
 	} );
-} )( jQuery );
+} )();

src/wp-admin/options-writing.php

@@ -54,6 +54,7 @@
 	'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
 );
 
+wp_enqueue_script( 'user-profile' );
 wp_enqueue_script( 'options' );
 
 require_once ABSPATH . 'wp-admin/admin-header.php';

src/wp-includes/script-loader.php

@@ -1260,8 +1260,8 @@ function wp_default_scripts( $scripts ) {
 
 	$scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );
 
-	$scripts->add( 'options', "/wp-admin/js/options$suffix.js", array( 'jquery', 'wp-i18n' ), false, 1 );
-	$scripts->set_translations( 'options' );
+	$scripts->add( 'wp-admin-options', "/wp-admin/js/options$suffix.js", array( 'jquery', 'wp-i18n' ), false, 1 );
+	$scripts->set_translations( 'wp-admin-options' );
 
 	$scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );