[4.x]: Entry Edit Interface Shifts Unexpectedly When "Unsaved Changes" Alert is Displayed

[richhayler]

What happened?

Description

When editing an entry and a change is detected Craft shows the alert, "Showing your unsaved changes." and a button to "discard" changes. While this notification is very helpful, when this appears it shifts the edit form down by the height of the alert container. This is not ideal if you choose to ignore the alert and continue editing as the alert can momentarily disrupt edit flow by moving the position of what is under the cursor unexpectedly.

screen-shift.mp4

Craft CMS version

4.0.2

PHP version

No response

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

[brandonkelly]

Tweaked this for the next release, so pointer events will be disabled from the time the notice begins to slide in, until 300 milliseconds after the animation completes.

[richhayler]

Thank you for taking a look at this issue and making the change. However I feel the real issue here is the shifting entry form which disrupts the editing flow. It would be better if the edit form did not move and remained stationary.

As this alert will be displayed as a consequence of changing anything in the entry form (which would likely be the case every time someone clicks into the edit entry page), and the alert remains in place until changes are discarded or the entry re-saved - wouldn’t it be better to display this extra space above the edit form when visiting the page and slide the alert into that space without moving the form? A default message could be displayed (with some useful info) to start with e.g. last saved/edited by “editor” on “date/time”.

[rickmerkelbach]

I'm noticing some feedback from clients about this as well. The timing of the alert isn't such a big issue, but the actual shifting of the entire entry form has caused a few issues during editing (removing the wrong asset from a field or using the wrong field).

A default message with the last editor and modification date, like richhayler suggested, would actually be really helpful for our sites with multiple editors.

[brandonkelly]

The UI shift is a feature not a bug – it helps draw attention to the fact that the notice was added.

I'm noticing some feedback from clients about this as well. The timing of the alert isn't such a big issue, but the actual shifting of the entire entry form has caused a few issues during editing (removing the wrong asset from a field or using the wrong field).

That won’t be an issue anymore after the next update thanks to the muted pointer events.

[brandonkelly]

Craft 4.0.3 is out now with that muted pointer event tweak.

[brandonkelly]

Changed my mind and got rid of the page jumping when possible, for the next release: #11586 (comment)