"unsaved changes" prompt because of runtimeMarkup

[ngrmm]

I’m working on a custom runtime markup field in ProcessWire’s admin. This field loads DOM elements asynchronously after the page loads (via JavaScript), updating part of the form visually.

The problem: When I try to leave the page without actually changing any form inputs, the "There are unsaved changes, are you sure you want to leave?" prompt still appears.

I suspect ProcessWire's admin JavaScript is detecting these DOM changes, but I’m unable to find which JS object or event is responsible.

Can anyone share how ProcessWire’s admin detects changes or how to override/reset that state?
Or pointers on what JS objects or events to manipulate?

Thanks a lot in advance!x

[ngrmm]

UPDATE:

I think I found a solution. You have to remove the InputfieldStateChanged class from the field wrapper after your AJAX changes.

function resetFieldState(fieldId) {
	const wrap = document.querySelector(`#wrap_${fieldId}`);
	if (wrap?.classList.contains('InputfieldStateChanged')) {
		wrap.classList.remove('InputfieldStateChanged');
	}
}


// then use resetFieldState('Inputfield_your_fieldname') after your ajax code

 

[bernhard]

You can add the class InputfieldIgnoreChanges to your field then the warning will not appear. Check out inputfields.js:

Quote

 * - InputfieldIgnoreChanges: Item that should not be tracked for changes to value.