require-button-type fix

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @action doSomething() {
    alert('form submitted');
  }
}

templates.application\.hbs

<h1>require-button-type</h1>
<p>
	The <code>--fix</code> behavior for the require-button-type rule adds <code>type="button"</code> to any button without an existing type.  However, < a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type">when a button is in a form</a>, the default for type is <code>type="submit"</code>.  Adding <code>type="button"</code> to these buttons in a form causes it to no longer work.
</p>

<h3>Before <code>--fix</code></h3>
<form {{on "submit" this.doSomething}}>
	<button>One</button>
</form>

<br>

<h3>After <code>--fix</code></h3>
<form {{on "submit" this.doSomething}}>
	<button type="button">Two</button>
</form>

<br>
<p>
	The proper fix is to make it either <code>type="submit"</code> <em>or</em> <code>type="submit"</code> depending if it's inside a form or not.
</p>  

<h3>Explicit <code>type="submit"</code></h3>
<form {{on "submit" this.doSomething}}>
	<button type="submit">Three</button>
</form>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}