Why does my Google Forms add-on open a new tab?

Question

I'm making a Google Forms add-on with Google Apps Script with an HTML file for its UI. I've pretty much taken the quickstart and changed a few things.

It's embarrassingly my first time doing any sort of HTML.

In my UI, I have a button:

<div class="sidebar branding-below">
      <form>
        <div class="block" id="button-bar">
          <button id="deactivate" class="action" onclick="deactivatePressed()">Deactivate</button><br><br>
          <div id="deactivation-confirmation"></div>
        </div>
      </form>
    </div>

Here's the corresponding javascript that calls the google apps script that actually does the work:

function deactivatePressed() {
    google.script.run.addTrigger(false);
    document.getElementById('deactivation-confirmation').innerHTML = "Success!";
}

The button shows up and the function called is successful.

The issue is that pressing this button also opens up a new blank tab to a specific link that looks like this:

https://n-it2esyxcfj91uyg675645seyxh42jvgbfydr5e6u56y-0lu-script.googleusercontent.com/userCodeAppPanel?

In the console, it runs an error message that reads:

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://docs.google.com' from frame with URL 'https://n-it2esyxcfj91uyg675645seyxh42jvgbfydr5e6u56y-0lu-script.googleusercontent.com/userCodeAppPanel'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

How do I make sure a new tab isn't opened when the script is run?

I'm sure it's in the HTML/js and isn't the Google Apps Script code since I commented out the body of the Google Apps Script function and the problem still occurred.

Answer 1

It's because the button was within the <form> tags.

Change it to this:

<div class="sidebar branding-below">
   <div class="block" id="button-bar">
      <button id="deactivate" class="action" onclick="deactivatePressed()">Deactivate</button><br><br>
      <div id="deactivation-confirmation"></div>
   </div>
</div>