fix(form): event order of reset and submit

ing-bank · Dec 6, 2019 · 190ba38 · 190ba38
1 parent 8f50144
commit 190ba38
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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);
+  });
 });