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`
+
+ `);
+ 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());