Makes paper-form an actual html form

addon/components/paper-form.js

@@ -14,11 +14,17 @@ const { Component, computed } = Ember;
  */
 export default Component.extend(ParentMixin, {
   layout,
-  tagName: '',
+  tagName: 'form',
   isValid: computed.not('isInvalid'),
   isInvalid: computed('[email protected]', function() {
     return this.get('childComponents').isAny('isInvalid');
   }),
+
+  submit() {
+    this.send('onSubmit');
+    return false;
+  },
+
   actions: {
     onValidityChange() {
       if (this.get('lastIsValid') !== this.get('isValid')) {

addon/templates/components/paper-form.hbs

@@ -6,7 +6,6 @@
     onValidityChange=(action "onValidityChange")
   )
   submit-button=(component "paper-button"
-    onClick=(action "onSubmit")
     type="submit"
   )
   select=(component "paper-select"
@@ -19,4 +18,3 @@
   )
   onSubmit=(action "onSubmit")
 )}}
-

tests/dummy/app/templates/forms.hbs

@@ -12,8 +12,10 @@
     {{#paper-card-content}}
       <p>
         ember-paper provides a <code>paper-form</code> to help you build forms
-        and keep track of the form's global validity state. This component is tagless,
-        so it shouldn't interfere with your styles.
+        and keep track of the form's global validity state. This component uses
+        the html form tag by default, so expected form behavior will occur.
+        (For example, pressing the enter key from within one of the form's
+        inputs will submit the form.)
         <code>paper-form</code> yields <code>{{#link-to "demo.input"}}paper-input{{/link-to}}</code>,
         <code>{{#link-to "demo.select"}}paper-select{{/link-to}}</code>
         and <code>{{#link-to "demo.autocomplete"}}paper-autocomplete{{/link-to}}</code> controls.

tests/integration/components/paper-form-test.js

@@ -50,12 +50,12 @@ test('form `onSubmit` action is invoked', function(assert) {
       {{form.input value=foo onChange=(action (mut foo)) label="Foo"}}
       {{form.input value=bar onChange=(action (mut bar)) label="Bar"}}
 
-      <button onclick={{action form.onSubmit}}>Submit</button>
+      <a {{action form.onSubmit}}>Submit</a>
 
     {{/paper-form}}
   `);
 
-  this.$('button').click();
+  this.$('a').click();
 });
 
 test('form `onValidityChange` action is invoked', function(assert) {
@@ -182,3 +182,23 @@ test('form submit button is of type submit', function(assert) {
 
   assert.equal(this.$('button').attr('type'), 'submit');
 });
+
+test('form `onSubmit` action is invoked when form element is submitted', function(assert) {
+  assert.expect(1);
+
+  this.set('onSubmit', () => {
+    assert.ok(true);
+  });
+
+  this.render(hbs`
+    {{#paper-form onSubmit=(action onSubmit) as |form|}}
+      {{form.input value=foo onChange=(action (mut foo)) label="Foo"}}
+      {{form.input value=bar onChange=(action (mut bar)) label="Bar"}}
+
+      <input type="submit" value="Submit">
+
+    {{/paper-form}}
+  `);
+
+  this.$('input').click();
+});