I have a reactive webpage where I'd like to display a warning to the user if they have any unsaved changes before leaving the page.

The JS I have added is below

let beforeUnloadHandler = $parameters.BeforeUnloadHandler

if (!beforeUnloadHandler) {

    beforeUnloadHandler = (event) => {

        event.preventDefault();

        event.stopPropagation();

        // Included for legacy support, e.g. Chrome/Edge < 119

        event.returnValue = true;

        };

}

$parameters.Out1 = beforeUnloadHandler

let anyUnsavedChanges = $parameters.CountriesChecked

if (anyUnsavedChanges ) {

    window.removeEventListener("beforeunload", beforeUnloadHandler);

    window.addEventListener("beforeunload", beforeUnloadHandler);

} else {

    window.removeEventListener("beforeunload", beforeUnloadHandler);

}

My application has two dropdowns of which the values are passed to a web block displayed further down

The onBeforeUnload event fires correctly when attempting to exit the tab or close the window.

However if I press the back button the event fires, the warning is displayed but clicking cancel causes the 2 dropdowns to change to the empty value text, which causes the web block below them to change and lose the unsaved data.

Is anyone able to advise as to what could be the issue here?