fix(item): pass the correct type property to the button tag

fixes #14740
This commit is contained in:
Brandy Carney
2018-07-11 12:10:38 -04:00
parent 02a0b6e5fe
commit 5f8b02eb3f
3 changed files with 24 additions and 5 deletions

View File

@ -3299,6 +3299,10 @@ declare global {
*/
'routerDirection': RouterDirection;
'state': 'valid' | 'invalid' | 'focus';
/**
* The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
*/
'type': 'submit' | 'reset' | 'button';
}
}
@ -3358,6 +3362,10 @@ declare global {
*/
'routerDirection'?: RouterDirection;
'state'?: 'valid' | 'invalid' | 'focus';
/**
* The type of the button. Only used when an `onclick` or `button` property is present. Possible values are: `"submit"`, `"reset"` and `"button"`. Default value is: `"button"`
*/
'type'?: 'submit' | 'reset' | 'button';
}
}
}

View File

@ -61,15 +61,22 @@ export class Item {
*/
@Prop() lines?: 'full' | 'inset' | 'none';
// TODO document this
@Prop() state?: 'valid' | 'invalid' | 'focus';
/**
* When using a router, it specifies the transition direction when navigating to
* another page using `href`.
*/
@Prop() routerDirection?: RouterDirection;
// TODO document this
@Prop() state?: 'valid' | 'invalid' | 'focus';
/**
* The type of the button. Only used when an `onclick` or `button` property is present.
* Possible values are: `"submit"`, `"reset"` and `"button"`.
* Default value is: `"button"`
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
@Listen('ionStyle')
itemStyle(ev: UIEvent) {
@ -131,11 +138,11 @@ export class Item {
}
render() {
const { href, detail, mode, win, state, detailIcon, el, routerDirection } = this;
const { href, detail, mode, win, state, detailIcon, el, routerDirection, type } = this;
const clickable = this.isClickable();
const TagType = clickable ? (href ? 'a' : 'button') : 'div';
const attrs = TagType === 'button' ? { type: 'button' } : { href };
const attrs = TagType === 'button' ? { type: type } : { href };
const showDetail = detail != null ? detail : mode === 'ios' && clickable;
return (

View File

@ -35,6 +35,10 @@
<ion-label>button[ion-item]</ion-label>
</ion-item>
<ion-item button type="submit" id="attachClick">
<ion-label>button[ion-item] type="submit"</ion-label>
</ion-item>
<ion-item class="activated" onClick="testClick(event)">
<ion-label>button[ion-item].activated</ion-label>
</ion-item>