fix(button): change redispatch click logic so form submit fires properly

Author: Joren Broekema

packages/button/src/LionButton.js

@@ -176,12 +176,11 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
   }
 
   /**
-   * Prevent normal click and redispatch click on the native button unless already redispatched.
+   * Prevent normal click and redispatch submit on the native button unless already redispatched.
    */
-  __clickDelegationHandler(e) {
-    if (!e.__isRedispatchedOnNativeButton) {
-      e.stopImmediatePropagation();
-      this._redispatchClickEvent(e);
+  __clickDelegationHandler() {
+    if (this.type === 'submit' && this._nativeButtonNode.form) {
+      this._nativeButtonNode.form.submit();
     }
   }
 

packages/button/stories/index.stories.js

@@ -35,9 +35,10 @@ storiesOf('Buttons|Button', module)
   .add(
     'Within a form',
     () => html`
-      <lion-form id="form"
+      <lion-form id="form" @submit=${() => console.log('form submitted')}
         ><form>
           <lion-input name="foo" label="Foo" .modelValue=${'bar'}></lion-input>
+          <lion-input name="foo2" label="Foo2" .modelValue=${'bar'}></lion-input>
           <lion-button
             type="submit"
             @click=${() => console.log(document.querySelector('#form').serializeGroup())}
@@ -46,4 +47,16 @@ storiesOf('Buttons|Button', module)
         </form></lion-form
       >
     `,
-  );
+  )
+  .add('Within another form', () => {
+    const submitForm = () => console.log('hey');
+    return html`
+      <form id="form" @submit=${submitForm}>
+        <h3>Details</h3>
+        <input name="input1" />
+        <input name="input2" />
+        <input name="input3" />
+        <lion-button>Submit</lion-button>
+      </form>
+    `;
+  });