diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js index 7138a74ce..5f92bb082 100644 --- a/packages/button/src/LionButton.js +++ b/packages/button/src/LionButton.js @@ -188,9 +188,10 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement)) e.stopPropagation(); } - if (this.type === 'submit' && e.target === this) { + if ((this.type === 'submit' || this.type === 'reset') && e.target === this) { if (this._form) { const nativeButton = document.createElement('button'); + nativeButton.type = this.type; this._form.appendChild(nativeButton); nativeButton.click(); this._form.removeChild(nativeButton); diff --git a/packages/button/stories/index.stories.js b/packages/button/stories/index.stories.js index 264065655..2899060c5 100644 --- a/packages/button/stories/index.stories.js +++ b/packages/button/stories/index.stories.js @@ -54,6 +54,9 @@ storiesOf('Buttons|Button', module)
  • Submit on button click
  • +
  • + Reset native form fields when using type="reset" +
  • Submit on button enter or space keypress
  • diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js index ca3001324..eae39df63 100644 --- a/packages/button/test/lion-button.test.js +++ b/packages/button/test/lion-button.test.js @@ -270,6 +270,29 @@ describe('lion-button', () => { expect(formSubmitSpy.callCount).to.equal(1); }); + it('supports resetting form inputs in a native form', async () => { + const form = await fixture(html` +
    + + + reset +
    + `); + const btn = form.querySelector('lion-button'); + const firstName = form.querySelector('input[name=firstName]'); + const lastName = form.querySelector('input[name=lastName]'); + firstName.value = 'Foo'; + lastName.value = 'Bar'; + + expect(firstName.value).to.equal('Foo'); + expect(lastName.value).to.equal('Bar'); + + btn.click(); + + expect(firstName.value).to.be.empty; + expect(lastName.value).to.be.empty; + }); + // input "enter" keypress mock doesn't seem to work right now, but should be tested in the future (maybe with Selenium) it.skip('works with implicit form submission on-enter inside an input', async () => { const formSubmitSpy = sinon.spy(e => e.preventDefault());