Override dirty form focus for button element in Chrome userscript

[Phrancis]

To give context, I'm not a NOW developer or admin, I am a worker who uses the NOW platform to work incidents for my employers.

That being said, what I am trying to do is to add a bit of automation in the browser with Tampermonkey extension for Chrome. It works well, for the most part, but there is one problem I am trying to solve and no matter what I have tried so far, I have not been able to. 

I am appending a button to an "incident.do" form to which I want to attach functionality (e.g. fill out some fields on the form), but there appears to be something in the "incident.do" page that overrides "onclick" attribute of buttons for the whole page. When the new button is clicked, it logs "dirty form focus" to the browser console, then leaves the current incident form and opens a new, blank "incident.do" form instead.

Is there a way to circumvent this from within the browser? What I have tried so far has not proven successful. 

Here is my JavaScript code.

const HEADER_SECTION_ID = "bf1d96e3c0a801640190725e63f8ac80";

// Create a container for the button and menu
const helperContainer = document.createElement("div");
helperContainer.id = "email-helper-container";
helperContainer.className = "section-content";
helperContainer.style.width = "100%";
document.getElementById(HEADER_SECTION_ID).appendChild(helperContainer);

// Append a button to the container
const button = document.createElement("button");
button.id = "email-template-populate";
button.className = "btn btn-default";
button.innerHTML = "Populate";
button.style.color = "blue";
helperContainer.appendChild(button);

// This function does not get called
// When button is clicked	
button.addEventListener("click", function(event) {
  console.log("Populate has been clicked");
  event.preventDefault();
  event.stopPropagation();
});

[Phrancis]

I found a workaround for my issue. instead of creating a button HTML element like this:

const button = document.createElement("button");

I created an input HTML element and set its type to a button, then the issue no longer happens.

const button = document.createElement("input");
button.type = "button";
// then add the eventListener and such

The JavaScript console still says "dirty form focus", but pressing it doesn't redirect to a new, blank "incident.do" form.

[Lucas Vieites]

Hi Phrancis,

I was trying a similar thing and your solution helped me in the right direction, even after 2 years ;).

Thank you very much,

Lucas