Merge pull request #5560 from Laravel-Backpack/fix-warn-before-leaving

fix warn before leaving - remove backpack dynamic inputs from serialization

src/config/backpack/operations/create.php

@@ -32,7 +32,9 @@
     // Should we show a cancel button to the user?
     'showCancelButton' => true,
 
-    // Should we warn a user before leaving the page with unsaved changes?
+    // Should we warn the user before leaving the page with unsaved changes?
+    // NOTE: this works by removing all fields from the form data serialization where field name starts with "_" (underscore). Usualy backpack internal attributes.
+    // if you have fields that start with an underscore, you need to change the field name, or this functionality wont detect changes in that field.
     'warnBeforeLeaving' => false,
 
     // Before saving the entry, how would you like the request to be stripped?

src/resources/views/crud/form_content.blade.php

@@ -100,7 +100,15 @@ function handleFocusOnSelect2Field(firstField){
 
       // Retrieves the current form data
       function getFormData() {
-        return new URLSearchParams(new FormData(document.querySelector("main form"))).toString();
+        let formData = new FormData(document.querySelector("main form"));
+        // remove internal inputs from formData, the ones that start with "_", like _token, _http_referrer, etc.
+        let pairs = [...formData].map(pair => pair[0]);
+        for (let pair of pairs) {
+          if (pair.startsWith('_')) {
+            formData.delete(pair);
+          }
+        }
+        return new URLSearchParams(formData).toString();
       }
 
       // Prevents unloading of page if form data was changed
@@ -114,8 +122,8 @@ function preventUnload(event) {
       }
 
       @if($crud->getOperationSetting('warnBeforeLeaving'))
-      const initData = getFormData();
-      window.addEventListener('beforeunload', preventUnload);
+        const initData = getFormData();
+        window.addEventListener('beforeunload', preventUnload);
       @endif
 
       // Save button has multiple actions: save and exit, save and edit, save and new