fix(button): submit forms using fake button

fixes #14890
fixes #14786

core/src/components/button/button.tsx

@@ -1,7 +1,8 @@
 import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
 
 import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
-import { getParentNode, openURL } from '../../utils/theme';
+import { hasShadowDom } from '../../utils/helpers';
+import { openURL } from '../../utils/theme';
 
 @Component({
   tag: 'ion-button',
@@ -121,28 +122,25 @@ export class Button {
   }
 
   onClick(ev: Event) {
-    if (this.type === 'submit') {
+    if (this.type === 'button') {
+      openURL(this.win, this.href, ev, this.routerDirection);
+
+    } else if (hasShadowDom(this.el)) {
       // this button wants to specifically submit a form
       // climb up the dom to see if we're in a <form>
       // and if so, then use JS to submit it
+      const form = this.el.closest('form');
+      if (form) {
+        ev.preventDefault();
+        ev.stopPropagation();
 
-      let node = this.el;
+        const fakeButton = document.createElement('button');
-      while ((node = getParentNode(node))) {
+        fakeButton.type = this.type;
-        if (node.nodeName.toLowerCase() === 'form') {
+        fakeButton.style.display = 'none';
-          // cool, this submit button is within a <form>, let's submit it
+        form.appendChild(fakeButton);
-
+        fakeButton.click();
-          // prevent the button's default and stop it's propagation
+        fakeButton.remove();
-          ev.preventDefault();
-          ev.stopPropagation();
-
-          // submit the <form> via JS
-          (node as HTMLFormElement).submit();
-          break;
-        }
       }
-
-    } else {
-      openURL(this.win, this.href, ev, this.routerDirection);
     }
   }
 

core/src/components/button/test/form/index.html

@@ -20,10 +20,10 @@
 
     <ion-content id="content" padding no-bounce text-center>
 
-      <form action="http://httpbin.org/get" method="GET">
+      <form onsubmit="return validate(event)" action="http://httpbin.org/get" method="GET">
 
         <div>
-          <input name="name">
+          <input name="name" required>
         </div>
 
         <ion-button type="submit">
@@ -36,6 +36,21 @@
 
   </ion-app>
 
+  <script>
+    document.querySelector('form').addEventListener('submit', (event) => {
+      console.log('SUBMIT from event', event);
+    });
+    function validate(event) {
+      console.log('SUBMIT from attribute', event);
+      if (event.target.elements[0].value === 'admin') {
+        return true;
+      } else {
+        console.log('INCORRECT USER, use "admin"')
+        return false;
+      }
+    }
+  </script>
+
 </body>
 
 </html>

core/src/utils/helpers.ts

@@ -9,8 +9,12 @@ export function reorderArray(array: any[], indexes: {from: number, to: number}):
   return array;
 }
 
+export function hasShadowDom(el: HTMLElement) {
+  return !!el.shadowRoot && !!el.attachShadow;
+}
+
 export function renderHiddenInput(container: HTMLElement, name: string, value: string, disabled: boolean) {
-  if (container.shadowRoot) {
+  if (hasShadowDom(container)) {
     let input = container.querySelector('input.aux-input') as HTMLInputElement;
     if (!input) {
       input = container.ownerDocument.createElement('input');