fix(item): prevent propagation on item option buttons. Fixes #412

ionic/components/item/item-sliding.ts

@@ -10,6 +10,23 @@ import * as util from 'ionic/util';
 import {CSS, raf} from 'ionic/util/dom';
 
 
+
+@Directive({
+  selector: 'ion-item-options > button,ion-item-options > [button]',
+  host: {
+    '(click)': 'clicked($event)'
+  }
+})
+export class ItemSlidingOptionButton {
+  constructor(elementRef: ElementRef) {
+  }
+  clicked(event) {
+    // Don't allow the click to propagate
+    event.preventDefault();
+    event.stopPropagation();
+  }
+}
+
 /**
  * @name ionItem
  * @description
@@ -41,8 +58,7 @@ import {CSS, raf} from 'ionic/util/dom';
       '<ion-item-content>' +
         '<ng-content></ng-content>'+
       '</ion-item-content>' +
-    '</ion-item-sliding-content>',
-  directives: [NgIf]
+    '</ion-item-sliding-content>'
 })
 export class ItemSliding {
   /**

ionic/components/item/test/sliding/index.ts

@@ -17,6 +17,13 @@ class E2EApp {
   }
 
   didClick(e) {
-    console.log('CLICK', e)
+    console.log('CLICK', e.defaultPrevented, e)
+  }
+
+  archive(e) {
+    console.log('Accept', e);
+  }
+  del(e) {
+    console.log('Delete', e);
   }
 }

ionic/components/item/test/sliding/main.html

@@ -8,7 +8,8 @@
       Hey do you want to go to the game tonight?
     </p>
     <ion-item-options>
-      <button primary>Archive</button>
+      <button primary (click)="archive($event)">Archive</button>
+      <button danger (click)="del($event)">Delete</button>
     </ion-item-options>
   </ion-item-sliding>
 

ionic/config/directives.ts

@@ -15,7 +15,7 @@ import {Tab} from '../components/tabs/tab';
 import {List, ListHeader} from '../components/list/list';
 import {Item} from '../components/item/item';
 import {ItemGroup, ItemGroupTitle} from '../components/item/item-group';
-import {ItemSliding} from '../components/item/item-sliding';
+import {ItemSliding, ItemSlidingOptionButton} from '../components/item/item-sliding';
 import {Toolbar, ToolbarTitle, ToolbarItem} from '../components/toolbar/toolbar';
 import {Icon} from '../components/icon/icon';
 import {Checkbox} from '../components/checkbox/checkbox';
@@ -60,6 +60,7 @@ export const IONIC_DIRECTIVES = [
   ItemGroup,
   ItemGroupTitle,
   ItemSliding,
+  ItemSlidingOptionButton,
 
   // Slides
   Slides,