fix(form): native submit event should not trigger an error

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"
   }
 }

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('submit', this.__boundSubmit);
-    this.addEventListener('reset', this._reset);
+    this.addEventListener('reset', this.__boundReset);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('submit', this._submit);
+    this.removeEventListener('submit', this.__boundSubmit);
-    this.removeEventListener('reset', this._reset);
+    this.removeEventListener('reset', this.__boundReset);
   }
 
   get formElement() {

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);
+  });
 });