feat(ld-button): implicit form submit

emdgroup-liquid · Oct 13, 2021 · 821c7ae · 821c7ae
1 parent ec3775f
commit 821c7ae
Show file tree

Hide file tree

Showing 3 changed files with 409 additions and 310 deletions.
diff --git a/src/liquid/components/ld-button/ld-button.tsx b/src/liquid/components/ld-button/ld-button.tsx
@@ -76,15 +76,40 @@ export class LdButton implements InnerFocusable {
     })
   }
 
+  private clickFakeButton(
+    form: HTMLFormElement,
+    buttonType: 'submit' | 'reset'
+  ) {
+    const btnFake = document.createElement('button')
+    btnFake.type = buttonType
+    btnFake.style.display = 'none'
+    form.appendChild(btnFake)
+    btnFake.click()
+    btnFake.remove()
+  }
+
   private handleClick = (event: MouseEvent) => {
-    console.log(event.target)
     const ariaDisabled = this.button.getAttribute('aria-disabled')
 
     if (this.disabled || (ariaDisabled && ariaDisabled !== 'false')) {
       event.preventDefault()
       event.stopImmediatePropagation()
       return
     }
+
+    if (!this.href) {
+      const form = this.el.closest('form')
+      if (form) {
+        switch (this.el.getAttribute('type')) {
+          case 'reset':
+            this.clickFakeButton(form, 'reset')
+            break
+          case 'submit':
+          default:
+            this.clickFakeButton(form, 'submit')
+        }
+      }
+    }
   }
 
   componentWillLoad() {