page change not prevented after field edit

[schwaaab]

Short description of the issue

After a field edit, if I click on a admin link, the alert appears because of unsaved data. If I use the browser buttons or mouse buttons, the page change is not prevented.

Expected behavior

Alert a message and prevent page change.

Actual behavior

The page is changed and the edited field data is lost.

Setup/Environment

• ProcessWire version: 3.0+
• (Optional) PHP version: 7.2 - 7.4

[ryancramerdesign]

@schwaaab I can't duplicate that here using browser buttons or mouse buttons (testing in latest Chrome). ProcessWire monitors the "beforeunload" event from the browser, which is generally triggered on any action that would cause you to go to another URL. If the browser doesn't trigger that event then ProcessWire can't display the confirm box. What browser are you using? I think it's possible that some browsers might make this configurable too, but I don't know for sure. The only other possibility I can think of is if there's a JS error that halts further JS processing, then that could do it too; so it might be worth checking your JS console just in case.

[schwaaab]

@ryancramerdesign It is correct, that under normal use the alert shows up. But there is one behaviour that got me cussing. I changed one field and then clicked the mouse button accidentally INSIDE the field. Then the page changed. It seems the page change function is listening to the blur field event, not the field change or focus event.

It is an exception though and I don't know if a change would make the user interface better. I used Chrome.

[ryancramerdesign]

@schwaaab ProcessWire monitors the "change" event, as it wouldn't be able to tell if something changed from a focus or blur event. What kind of field was it that you changed? If it's not one that relies on a browser input element (like some primarily JS-based field), then it's possible that whatever kind of field it is doesn't trigger the change event until the blur event or something like that; that's my best guess based on what I know so far.

[schwaaab]

@ryancramerdesign The alert shows up when I change the body field (textarea). By changing the title field or any text field AND click back INSIDE the field, it does not work. I don't know if this is a browser specific behaviour (Chrome) or something else.

It's not a hard problem and I don't know if it can be improved.

[matjazpotocnik]

@ryancramerdesign, I can confirm what @schwaaab is experiencing, testing in Edge. The key is that the browser alert is not shown when the cursor is inside the input field, and you click the back button in the browser.

The "beforeunload" event is triggered, but the change is not noticed. It's caught only when the cursor is outside of the input field. Simon, can you modify line 2174 in /wire/templates-admin/scripts/inputfields.js so that event is triggered on "input" instead of "change"? While this might work, it's not ideal as it triggers too many events.

Also, these days all major browsers don't support custom message in the beforeunload popup. There is no new way to do this.

[ryancramerdesign]

@matjazpotocnik That's interesting to hear some browsers aren't supporting it. Not sure if there's much we can do in that case, but I'll plan to revisit this one later.