Change detection JS plugin overly sensitive

[steva82]

Winter CMS Build: 1.2.5
Pages Plugin Version: 2.1.3
PHP Version: 8.2.0

Description:

When a Page is duplicated and saved ("The page has been successfully saved.") the little icon on the right of the tab doesn't change (always a circle, not a X) and the system seems don't understand its status.

Steps To Reproduce:

1. create a page and save it
2. duplicate this page
3. edit its title, url and body (image1)
4. save it ("The page has been successfully saved." appears) (image2)
5. close it and the original one
6. the message "Close the tab? Unsaved changes will be lost." appears (image3)

Thanks.

[LukeTowers]

I've noticed that the change indicator has seemed a bit buggy in general for the past while, mostly when you have multiple tabs open. Do you think you could dig further into it and submit a PR to fix the issue?

[LukeTowers]

@ericp-mrel is this something you'd be willing to take a look at?

[ericp-mrel]

Here's what I've found so far.

If you have multiple tabs open and you make changes to one of them, then all of the open tabs are being marked as modified.

It seems like something is causing the change event to be re-triggered after the original change event is fired since there is a slight delay between the first tab's close button is changed and when the others change.

---

There's also another issue related to the markup that's being added to the page when duplicating a page that's causing an issue with the modified counter not updating correctly. It seems like some of the form's hidden fields are being added as children inside a div, rather than being direct children to the actual form element itself.

This is problematic because of the following selector:

wn-pages-plugin/assets/js/pages-page.js

Line 148 in 728d2f0

var inputType = $('> form > input[name=objectType]', this).val()

I haven't been able to figure out why this is happening yet.

[ericp-mrel]

This is what I've found after digging around with the JS debugger a little bit.

It seems like what's happening is when you make a change to an input field, the initial change event correctly fires and marks the active tab as modified. But then after that the FormWidget.onRefreshDependants function gets run and then triggers the change event during the refresh process and as a result of that every tab is marked as modified.

https://github.com/wintercms/winter/blob/9932f0c05f7423a50b526f05e2748185084bf143/modules/backend/widgets/form/assets/js/winter.form.js#L169-L200

[LukeTowers]

@bennothommo @jaxwilko @mjauvin any thoughts?