From 3c15b118ca741bdbfe5314e222f069cbdeb15bf2 Mon Sep 17 00:00:00 2001
From: Andrew Joslin <andytjoslin@gmail.com>
Date: Tue, 13 May 2014 07:27:54 -0600
Subject: [PATCH] fix(activator): properly activate elements nested inside an
 item.

Addresses #1373.

Before: if an `<a>`, `ng-click`, or `<button>` inside of a .item,
was clicked, the activator would walk up .item and activate it.

Now:  If an `<a>`, `ng-click`, or `<button>` inside of a
.item is clicked, the activator will activate that element.

Additionally, CSS was added so `a.item-content.activated` would look
activated.
---
 js/utils/activator.js             |  1 +
 scss/_items.scss                  |  4 +++-
 test/html/list.html               |  8 ++++++++
 test/unit/utils/activator.unit.js | 18 +++++++++---------
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/js/utils/activator.js b/js/utils/activator.js
index 25fb7c048f7..3a76c8f476f 100644
--- a/js/utils/activator.js
+++ b/js/utils/activator.js
@@ -26,6 +26,7 @@
           }
           if( ele.tagName == 'A' || ele.tagName == 'BUTTON' || ele.hasAttribute('ng-click') ) {
             eleToActivate = ele;
+            break;
           }
           if( ele.classList.contains('button') ) {
             eleToActivate = ele;
diff --git a/scss/_items.scss b/scss/_items.scss
index 12dc3969b12..fb0aff69d6c 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -104,7 +104,9 @@
 .item.active,
 .item.activated,
 .item-complex.active .item-content,
-.item-complex.activated .item-content {
+.item-complex.activated .item-content,
+.item .item-content.active,
+.item .item-content.activated {
   @include item-active-style($item-default-active-bg, $item-default-active-border);
 
   // Different active themes for <a> and <button> items
diff --git a/test/html/list.html b/test/html/list.html
index 9f2f6cdbb97..c32a2c78c70 100644
--- a/test/html/list.html
+++ b/test/html/list.html
@@ -49,6 +49,14 @@ <h1 class="title">Ionic Delete/Option Buttons</h1>
   		<div class="item item-divider">
   		Type 1
   		</div>
+      <ion-item href="#">
+        <button class="button button-energized">
+          Hello
+        </button>
+      </ion-item>
+      <ion-item href="hello">
+        Woah!
+      </ion-item>
         <ion-item ng-repeat="item in items"
                   ng-click="alert(item.id)"
                   class="item item-avatar-left item-icon-right"
diff --git a/test/unit/utils/activator.unit.js b/test/unit/utils/activator.unit.js
index ef0e44fdbe3..1dde2e63d61 100644
--- a/test/unit/utils/activator.unit.js
+++ b/test/unit/utils/activator.unit.js
@@ -44,7 +44,7 @@ describe('Ionic Element Activator', function() {
     expect(e.target.classList.contains('activated')).toEqual(false);
   });
 
-  it('Should activate .item with a child "a"', function() {
+  it('Should activate "a" in a .item', function() {
     var itemEle = document.createElement('div');
     itemEle.className = 'item';
 
@@ -54,11 +54,11 @@ describe('Ionic Element Activator', function() {
     var e = { target: aEle };
 
     ionic.activator.start(e);
-    expect(itemEle.classList.contains('activated')).toEqual(true);
-    expect(aEle.classList.contains('activated')).toEqual(false);
+    expect(itemEle.classList.contains('activated')).toEqual(false);
+    expect(aEle.classList.contains('activated')).toEqual(true);
   });
 
-  it('Should activate .item with a child "div.item-content a"', function() {
+  it('Should activate "div.item-content a" child of .item', function() {
     var itemEle = document.createElement('div');
     itemEle.className = 'item';
 
@@ -72,12 +72,12 @@ describe('Ionic Element Activator', function() {
     var e = { target: aEle };
 
     ionic.activator.start(e);
-    expect(itemEle.classList.contains('activated')).toEqual(true);
+    expect(itemEle.classList.contains('activated')).toEqual(false);
     expect(itemContentEle.classList.contains('activated')).toEqual(false);
-    expect(aEle.classList.contains('activated')).toEqual(false);
+    expect(aEle.classList.contains('activated')).toEqual(true);
   });
 
-  it('Should activate .item with a child "div.item-content div[ng-click]"', function() {
+  it('Should activate child "div.item-content div[ng-click]" of a .item', function() {
     var itemEle = document.createElement('div');
     itemEle.className = 'item';
 
@@ -92,9 +92,9 @@ describe('Ionic Element Activator', function() {
     var e = { target: divEle };
 
     ionic.activator.start(e);
-    expect(itemEle.classList.contains('activated')).toEqual(true);
+    expect(itemEle.classList.contains('activated')).toEqual(false);
     expect(itemContentEle.classList.contains('activated')).toEqual(false);
-    expect(divEle.classList.contains('activated')).toEqual(false);
+    expect(divEle.classList.contains('activated')).toEqual(true);
   });
 
 });