From 190ba3854a6a031f996e77a7c2ee4cbf851fecbb Mon Sep 17 00:00:00 2001
From: Thijs Louisse <Thijs.Louisse@ing.com>
Date: Thu, 5 Dec 2019 14:56:28 +0100
Subject: [PATCH] fix(form): event order of reset and submit

---
 packages/form/src/LionForm.js          |  4 +--
 packages/form/stories/index.stories.js |  3 +-
 packages/form/test/lion-form.test.js   | 50 +++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 4 deletions(-)

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)
             >
             </lion-input>
           </lion-fieldset>
-          <button type="submit">Submit</button>
+          <button type="submit">Submit & Reset (if successfully submitted)</button>
           <button type="button" @click=${() => document.querySelector('#form').resetGroup()}>
             Reset
           </button>
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('<lion-form>', () => {
     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`
+      <lion-form>
+        <form>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    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`
+      <lion-form>
+        <form>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+    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`
+      <lion-form>
+        <form>
+          <button type="reset">submit</button>
+        </form>
+      </lion-form>
+    `);
+    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);
+  });
 });