From f2c44331389d2bf485471752a6613d63dcf9ab74 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Wed, 15 May 2019 11:14:17 +0200
Subject: [PATCH] fix(form): native submit event should not trigger an error

---
 packages/form/package.json           |  3 ++-
 packages/form/src/LionForm.js        | 14 ++++++++++----
 packages/form/test/lion-form.test.js | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/packages/form/package.json b/packages/form/package.json
index 4d9bdd21d..69cd3f447 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -39,6 +39,7 @@
     "@lion/textarea": "^0.1.8",
     "@lion/validate": "^0.1.8",
     "@open-wc/demoing-storybook": "^0.2.0",
-    "@open-wc/testing": "^0.11.1"
+    "@open-wc/testing": "^0.11.1",
+    "sinon": "^7.2.2"
   }
 }
diff --git a/packages/form/src/LionForm.js b/packages/form/src/LionForm.js
index cc70135bc..442532091 100644
--- a/packages/form/src/LionForm.js
+++ b/packages/form/src/LionForm.js
@@ -18,16 +18,22 @@ export class LionForm extends DelegateMixin(LionFieldset) {
     };
   }
 
+  constructor() {
+    super();
+    this.__boundSubmit = this._submit.bind(this);
+    this.__boundReset = this._reset.bind(this);
+  }
+
   connectedCallback() {
     super.connectedCallback();
-    this.addEventListener('submit', this._submit);
-    this.addEventListener('reset', this._reset);
+    this.addEventListener('submit', this.__boundSubmit);
+    this.addEventListener('reset', this.__boundReset);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('submit', this._submit);
-    this.removeEventListener('reset', this._reset);
+    this.removeEventListener('submit', this.__boundSubmit);
+    this.removeEventListener('reset', this.__boundReset);
   }
 
   get formElement() {
diff --git a/packages/form/test/lion-form.test.js b/packages/form/test/lion-form.test.js
index d8a8d03b4..4389976b0 100644
--- a/packages/form/test/lion-form.test.js
+++ b/packages/form/test/lion-form.test.js
@@ -1,4 +1,5 @@
 import { expect, fixture, html } from '@open-wc/testing';
+import { spy } from 'sinon';
 
 import '@lion/input/lion-input.js';
 import '@lion/fieldset/lion-fieldset.js';
@@ -37,4 +38,19 @@ describe('<lion-form>', () => {
       firstName: 'Foo',
     });
   });
+
+  it('works with the native submit event (triggered via a button)', async () => {
+    const submitSpy = spy();
+    const el = await fixture(html`
+      <lion-form @submit=${submitSpy}>
+        <form>
+          <button type="submit">submit</button>
+        </form>
+      </lion-form>
+    `);
+
+    const button = el.querySelector('button');
+    button.click();
+    expect(submitSpy.callCount).to.equal(1);
+  });
 });