How to exclude actions from triggering draft changes in field layouts?

[BenParizek]

I have a custom Element that uses Drafts where I want to give the user the option to take an action from the Element edit page. Currently, any change on that page triggers a draft resave and presents the user with the banner at the top of the edit page which says: Showing your unsaved changes. Discard.

For context, my element is an Email Element and I'm trying to give the user the option to send a test email to preview the content they are working on. The problem currently is that if they click on the 'Test' button, it pops up a modal to allow them to do that but also triggers the Showing your unsaved changes forcing them to need to take an additional action to discard the changes after they finish sending the test even though they didn't change anything related to their content.

I think this is the relevant section of code:

cms/src/web/assets/cp/src/js/ElementEditor.js

Lines 252 to 268 in 6db32e6

	this.addListener(
	$target,
	'keypress,keyup,change,focus,blur,click,mousedown,mouseup',
	(ev) => {
	if ($(ev.target).is(this.statusIcons())) {
	return;
	}
	clearTimeout(this.timeout);
	// If they are typing, wait half a second before checking the form
	if (['keypress', 'keyup', 'change'].includes(ev.type)) {
	this.timeout = setTimeout(this.checkForm.bind(this), 500);
	} else {
	this.checkForm();
	}
	}
	);
	},

And it appears the status icons are excluded from triggering these types of changes:

if ($(ev.target).is(this.statusIcons())) {
  return;
}

Is there any way that I could signal to the Craft JS that I do not want an element on the Element Edit page to trigger a 'things have changed' signal?

One thing that could be nice is if I could just add some class or data attribute that Craft checks for and excludes similar to the status icons. Something like:

<div ignore-element-editor-attribute>My thing that triggers a non-content related action</div>

[brandonkelly]

It will only trigger an autosave if the form data has changed. What exactly is changing in your form data, and could that data be added to the DOM outside of the primary form instead?

[BenParizek]

I'm currently inserting a button and a modal form using the Element::getAdditionalButtons() method which is inside of the primary form tag.

I've just tested having the button trigger an html form defined in my javascript and that appears to get around this issue. I'll explore that direction more.

Are there any ways within the Element APIs I can insert data outside of the primary form or is javascript going to be the primary way to achieve that?

[brandonkelly]

You’ll just need to add it with some JS code.

[michaelrog]

It might be possible to wrap your inputs content in a "sink" — i.e. a div that absorbs DOM events and stops them from propagating further up the chain. Either way... gonna need some custom JS.