[Bug] Warn Before Leaving and Tabs

[misiekch]

Bug report

What I did

Selecting form tab causes showing warn about unsaved changes.

What I expected to happen

I wanted to leave the form without warning because i hadn't made any real changes.

What happened

Current tab is stored in hidden form field input[name='_current_tab'].

What I've already tried to fix it

Replacing getFormData method in form_content.blade.php

function getFormData() {
    return new URLSearchParams(new FormData(document.querySelector("main form"))).toString();
}

with

function getFormData() {
    var form = document.querySelector("main form");
    form.querySelector("input[name=_current_tab]").remove();
    return new URLSearchParams(new FormData(form)).toString();
}

Is it a bug in the latest version of Backpack?

After I run composer update backpack/crud the bug... is it still there?

Backpack, Laravel, PHP, DB version

When I run php artisan backpack:version the output is:

[tabacitu]

Hi @misiekch ,

Thanks for the report! I can confirm it's happening. For example if we turn 'warnBeforeLeaving' => true, in our Demo, in our MonsterCRUD you will get a notice when leaving, even if you didn't edit anything.

However... your code would remove the input entirely from the page. Which... 👀 I don't think is ok. Afaik the input is there in order for the "save and back" functionality to work, after the refresh to be redirected to the same tab. If you remove it with JS... that would stop working.

So a more "proper" solution would probably be to remove the input not from the DOM, but from the formData variable. And while we're at it, I believe we can expand the scope, and not only remove _current_tab but any input that starts with _ - those are just auxiliary inputs after all. So something like:

      function getFormData() {
        var form = document.querySelector("main form");
        var originalFormData = new FormData(form);
        var filteredFormData = new FormData();

        // Iterate over each entry in the original FormData
        for (let [key, value] of originalFormData.entries()) {
          // Add the entry to the new FormData if the key does not start with "_"
          if (!key.startsWith('_')) {
            filteredFormData.append(key, value);
          }
        }

        return new URLSearchParams(filteredFormData).toString();
      }

But that doesn't work either 🤦‍♂️ So... maybe that wasn't the problem here? At least not in Monster? Maybe there's a different input that gets populated with JS? 🤷‍♂️

I gotta go, but I'll investigate this further and come back with a solution.

Thanks for reporting.
Cheers!