javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): submit forms using fake button

Browse Source 
fixes #14890
fixes #14786
This commit is contained in:
Manu Mtz.-Almeida
2018-07-30 18:41:32 +02:00
parent b0ed4265eb
commit c05d672703
3 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/src/components/button/button.tsx
View File

@ -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;
while ((node = getParentNode(node))) {
if (node.nodeName.toLowerCase() === 'form') {
// cool, this submit button is within a <form>, let's submit it
// prevent the button's default and stop it's propagation
ev.preventDefault();
ev.stopPropagation();
// submit the <form> via JS
(node as HTMLFormElement).submit();
break;
}
const fakeButton = document.createElement('button');
fakeButton.type = this.type;
fakeButton.style.display = 'none';
form.appendChild(fakeButton);
fakeButton.click();
fakeButton.remove();
}
} else {
openURL(this.win, this.href, ev, this.routerDirection);
}
}