From b6ae19cfb921424979ae11c97010b65581dc7011 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 29 Sep 2015 19:45:45 -0500
Subject: [PATCH] fix(item): allow clicks from within item content

Closes #215
---
 ionic/components/item/item.scss              |  5 +++
 ionic/components/item/test/buttons/index.ts  |  8 ++++-
 ionic/components/item/test/buttons/main.html | 35 ++++++++++----------
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/ionic/components/item/item.scss b/ionic/components/item/item.scss
index e82397e1ea..95041526d9 100644
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -63,6 +63,11 @@ ion-item-content {
   overflow: hidden;
   text-overflow: ellipsis;
   pointer-events: none;
+
+  a,
+  button {
+    pointer-events: auto;
+  }
 }
 
 .item-text-wrap ion-item-content {
diff --git a/ionic/components/item/test/buttons/index.ts b/ionic/components/item/test/buttons/index.ts
index 43aed36502..2afa53ee3b 100644
--- a/ionic/components/item/test/buttons/index.ts
+++ b/ionic/components/item/test/buttons/index.ts
@@ -4,4 +4,10 @@ import {App} from 'ionic/ionic';
 @App({
   templateUrl: 'main.html'
 })
-class E2EApp {}
+class E2EApp {
+
+  testClick(ev) {
+    console.log('CLICK!', ev.target.tagName, ev.target.textContent.trim());
+  }
+
+}
diff --git a/ionic/components/item/test/buttons/main.html b/ionic/components/item/test/buttons/main.html
index 2810fb108c..09a63cf7a8 100644
--- a/ionic/components/item/test/buttons/main.html
+++ b/ionic/components/item/test/buttons/main.html
@@ -2,72 +2,72 @@
 
 <ion-list>
 
-  <a ion-item href="#">
+  <a ion-item href="#" (click)="testClick($event)">
     a[ion-item]
   </a>
 
-  <a ion-item class="activated" href="#">
+  <a ion-item class="activated" href="#" (click)="testClick($event)">
     a[ion-item].activated
   </a>
 
-  <button ion-item>
+  <button ion-item (click)="testClick($event)">
     button[ion-item]
   </button>
 
-  <button ion-item class="activated">
+  <button ion-item class="activated" (click)="testClick($event)">
     button[ion-item].activated
   </button>
 
   <ion-item>
-    <button item-left>Default</button>
+    <button item-left (click)="testClick($event)">Default</button>
     Inner Buttons
-    <button outline item-right>Outline</button>
+    <button outline item-right (click)="testClick($event)">Outline</button>
   </ion-item>
 
   <ion-item>
-    <button item-left>
+    <button item-left (click)="testClick($event)">
       <icon home></icon>
       Left Icon
     </button>
     left icon buttons
-    <button outline item-right>
+    <button outline item-right (click)="testClick($event)">
       <icon star></icon>
       Left Icon
     </button>
   </ion-item>
 
   <ion-item>
-    <button item-left>
+    <button item-left (click)="testClick($event)">
       Right Icon
       <icon home></icon>
     </button>
     right icon buttons
-    <button outline item-right>
+    <button outline item-right (click)="testClick($event)">
       Right Icon
       <icon star></icon>
     </button>
   </ion-item>
 
   <ion-item>
-    <button clear item-left>
+    <button clear item-left (click)="testClick($event)">
       <icon navigate></icon>
     </button>
     icon only buttons
-    <button clear item-right>
+    <button clear item-right (click)="testClick($event)">
       <icon navigate></icon>
     </button>
   </ion-item>
 
   <ion-item>
     ion-item right icon/text button
-    <button item-right>
+    <button item-right (click)="testClick($event)">
       <icon refresh></icon>
       Refresh
     </button>
   </ion-item>
 
   <ion-item>
-    <button clear item-left>
+    <button clear item-left (click)="testClick($event)">
       <icon settings></icon>
       Settings
     </button>
@@ -76,15 +76,16 @@
 
   <ion-item>
     ion-item right clear button
-    <button secondary clear item-right>
+    <button secondary clear item-right (click)="testClick($event)">
       Edit
     </button>
   </ion-item>
 
   <ion-item class="item-text-wrap">
     This is multiline text that has a
-    long description of about how the text is really long.
-    <button outline item-right>View</button>
+    long description of about how the text is really long
+    and a <a href="#" (click)="testClick($event)">link</a>.
+    <button outline item-right (click)="testClick($event)">View</button>
   </ion-item>
 
 </ion-list>