diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index daf4f522e2..2481c36340 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -1,6 +1,6 @@ import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; -import { openURL } from '../../utils/theme'; +import { getParentNode, openURL } from '../../utils/theme'; @Component({ @@ -118,6 +118,32 @@ export class Button { this.ionBlur.emit(); } + onClick(ev: Event) { + if (this.type === 'submit') { + // this button wants to specifically submit a form + // climb up the dom to see if we're in a
+ // and if so, then use JS to submit it + + let node = this.el; + while ((node = getParentNode(node))) { + if (node.nodeName.toLowerCase() === 'form') { + // cool, this submit button is within a , let's submit it + + // prevent the button's default and stop it's propagation + ev.preventDefault(); + ev.stopPropagation(); + + // submit the via JS + (node as HTMLFormElement).submit(); + break; + } + } + + } else { + openURL(this.win, this.href, ev, this.routerDirection); + } + } + hostData() { const { buttonType, color, expand, fill, mode, shape, size, strong } = this; @@ -150,7 +176,7 @@ export class Button { onFocus={this.onFocus.bind(this)} onKeyUp={this.onKeyUp.bind(this)} onBlur={this.onBlur.bind(this)} - onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}> + onClick={this.onClick.bind(this)}> diff --git a/core/src/components/button/test/form/index.html b/core/src/components/button/test/form/index.html new file mode 100644 index 0000000000..718a241bc9 --- /dev/null +++ b/core/src/components/button/test/form/index.html @@ -0,0 +1,41 @@ + + + + + + Button - Form + + + + + + + + + + + Button - Form Submit + + + + + + + +
+ +
+ + + Submit Form + + + + + + + + + + + diff --git a/core/src/utils/theme.ts b/core/src/utils/theme.ts index 24b23b2a77..13f3439778 100644 --- a/core/src/utils/theme.ts +++ b/core/src/utils/theme.ts @@ -50,3 +50,13 @@ export async function openURL(win: Window, url: string|undefined, ev: Event, dir } return Promise.resolve(); } + +export function getParentNode(node: Node) { + // this also checks for host elements of shadow root node + // if the parent node is a document fragment (shadow root) + // then use the "host" property on it + // otherwise use the parent node + // DOCUMENT_FRAGMENT_NODE nodeType === 11 + const parentNode: any = node.parentNode; + return (parentNode && parentNode.NODE_TYPE === 11 ? parentNode.host : parentNode); +}