Prevent submitting a form when clicking clear in paper-autocomplete (#1089)

- update the paper-reset-button type to button to avoid the default of
  type="submit" when inside a form
- add tests for paper-reset-button and paper-autocomplete components

Author: Nick Eaket

addon/components/paper-reset-button.js

@@ -3,7 +3,8 @@ import TransitionMixin from 'ember-css-transitions/mixins/transition-mixin';
 
 export default Component.extend(TransitionMixin, {
   tagName: 'button',
-  attributeBindings: ['tabindex'],
+  type: 'button',
+  attributeBindings: ['tabindex', 'type'],
   transitionClass: 'ng',
   onReset: null,
 

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

@@ -291,4 +291,30 @@ module('Integration | Component | paper-autocomplete', function(hooks) {
     assert.dom('md-input-container').hasClass('md-input-invalid');
     assert.dom('md-autocomplete .paper-input-error').hasText('validation error!');
   });
+
+  test('it does not submit a form when clear is clicked', async function(assert) {
+    assert.expect(3);
+
+    this.set('selectedItem', '1');
+    this.set('items', ['1', '2']);
+    this.set('submitForm', () => {
+      this.set('formSubmitted', true);
+    });
+
+    await render(hbs`
+      {{#paper-form onSubmit=(action submitForm) as |form|}}
+        {{form.autocomplete
+          allowClear=true
+          options=items
+          selected=selectedItem
+          onSelectionChange=(action (mut selectedItem))
+        }}
+      {{/paper-form}}
+    `);
+
+    assert.dom('form md-autocomplete button').hasAttribute('type', 'button', 'Clear has type="button"');
+    await click('form md-autocomplete button');
+    assert.notOk(this.get('selectedItem'), 'The selected item is cleared');
+    assert.notOk(this.get('formSubmitted'), 'The outer form should not be submitted when the clear button is clicked');
+  });
 });

tests/integration/components/paper-reset-button-test.js

@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { render, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | paper reset button', function(hooks) {
@@ -23,4 +23,27 @@ module('Integration | Component | paper reset button', function(hooks) {
 
     assert.dom(this.element).hasText('template block text');
   });
+
+  test('it does not submit a form on click', async function(assert) {
+    assert.expect(3);
+
+    this.set('submitForm', () => {
+      this.set('formSubmitted', true);
+    });
+
+    this.set('onReset', () => {
+      this.set('resetClicked', true);
+    });
+
+    await render(hbs`
+      <form {{action "submitForm" on="submit"}}>
+        {{paper-reset-button class="reset-btn" onReset=(action onReset)}}
+      </form>
+    `);
+
+    assert.dom('form .reset-btn').hasAttribute('type', 'button', 'reset-button has type="button"');
+    await click('form .reset-btn');
+    assert.ok(this.get('resetClicked'), 'The reset button was clicked');
+    assert.notOk(this.get('formSubmitted'), 'The outer form should not be submitted when the reset button is clicked');
+  });
 });