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

fixes #14740
ionic-team · Jul 11, 2018 · 5f8b02e · 5f8b02e
1 parent 02a0b6e
commit 5f8b02e
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -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';
     }
   }
 }

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
@@ -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 (

diff --git a/core/src/components/item/test/buttons/index.html b/core/src/components/item/test/buttons/index.html
@@ -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>