diff --git a/packages/form/src/LionForm.js b/packages/form/src/LionForm.js
index ffcbf3a9c..db02fa385 100644
--- a/packages/form/src/LionForm.js
+++ b/packages/form/src/LionForm.js
@@ -43,16 +43,16 @@ export class LionForm extends LionFieldset {
this._submit = ev => {
ev.preventDefault();
ev.stopPropagation();
- this.dispatchEvent(new Event('submit', { bubbles: true }));
this.submitGroup();
+ this.dispatchEvent(new Event('submit', { bubbles: true }));
};
this.formElement.addEventListener('submit', this._submit);
this._reset = ev => {
ev.preventDefault();
ev.stopPropagation();
- this.dispatchEvent(new Event('reset', { bubbles: true }));
this.resetGroup();
+ this.dispatchEvent(new Event('reset', { bubbles: true }));
};
this.formElement.addEventListener('reset', this._reset);
}
diff --git a/packages/form/stories/index.stories.js b/packages/form/stories/index.stories.js
index a9f92f922..ccee70df3 100644
--- a/packages/form/stories/index.stories.js
+++ b/packages/form/stories/index.stories.js
@@ -41,6 +41,7 @@ storiesOf('Forms|Form', module)
const form = document.querySelector('#form');
if (!form.hasFeedbackFor.includes('error')) {
console.log(form.serializeGroup());
+ form.resetGroup();
}
};
return html`
@@ -60,7 +61,7 @@ storiesOf('Forms|Form', module)
>
-
+
diff --git a/packages/form/test/lion-form.test.js b/packages/form/test/lion-form.test.js
index f1edbdb99..b968e1b2c 100644
--- a/packages/form/test/lion-form.test.js
+++ b/packages/form/test/lion-form.test.js
@@ -1,4 +1,4 @@
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
+import { expect, fixture, html, oneEvent, aTimeout } from '@open-wc/testing';
import { spy } from 'sinon';
import '@lion/input/lion-input.js';
@@ -89,4 +89,52 @@ describe('', () => {
expect(submitEv.bubbles).to.be.true;
expect(submitEv.composed).to.be.false;
});
+
+ it('handles internal submit handler before dispatch', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ const button = el.querySelector('button');
+ const internalHandlerSpy = spy(el, 'submitGroup');
+ const dispatchSpy = spy(el, 'dispatchEvent');
+ await aTimeout();
+ button.click();
+ expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
+ });
+
+ it('handles internal submit handler before dispatch', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ const button = el.querySelector('button');
+ const internalHandlerSpy = spy(el, 'submitGroup');
+ const dispatchSpy = spy(el, 'dispatchEvent');
+ button.click();
+ expect(dispatchSpy.args[0][0].type).to.equal('submit');
+ expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
+ });
+
+ it('handles internal reset handler before dispatch', async () => {
+ const el = await fixture(html`
+
+
+
+ `);
+ const button = el.querySelector('button');
+ const internalHandlerSpy = spy(el, 'resetGroup');
+ const dispatchSpy = spy(el, 'dispatchEvent');
+ button.click();
+ expect(dispatchSpy.args[0][0].type).to.equal('reset');
+ expect(internalHandlerSpy).to.be.calledBefore(dispatchSpy);
+ });
});