From 7057c325cba7742a4a110799b10b897dd5d9ad14 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 25 Nov 2015 22:25:41 +0100
Subject: [PATCH] fix performance issue with outside click event - only bind
 click when element is active

---
 .../components/events/events.directive.js      | 18 +++++++++++++++++-
 .../src/views/propertyeditors/grid/grid.html   |  9 ++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js
index 02da7bba7f..43585fe94b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js
@@ -173,8 +173,24 @@ angular.module('umbraco.directives')
                 scope.$apply(attrs.onOutsideClick);
         }
 
+
         $timeout(function(){
-            $(document).on("click", oneTimeClick);
+
+            if ("bindClickOn" in attrs) {
+
+                scope.$watch(function() {
+                    return attrs.bindClickOn;
+                }, function(newValue) {
+                    if (newValue === "true") {
+                        $(document).on("click", oneTimeClick);
+                    } else {
+                        $(document).off("click", oneTimeClick);
+                    }
+                });
+
+            } else {
+                $(document).on("click", oneTimeClick);
+            }
 
             scope.$on("$destroy", function() {
                 $(document).off("click", oneTimeClick);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 2633c41158..732707b807 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -58,7 +58,8 @@
                                      '-has-config': hasConfig(row),
                                      '-active': row.active,
                                      '-active-child': hasActiveChild(row, 'row')}"
-                             on-outside-click="clickOutsideRow($index, section.rows)">
+                             on-outside-click="clickOutsideRow($index, section.rows)"
+                             bind-click-on="{{row.active}}">
 
                             <div class="umb-row-title-bar">
 
@@ -109,7 +110,8 @@
                                                     '-active-child': hasActiveChild(area, 'cell')}"
                                                  ng-model="area.controls"
                                                  ng-click="clickCell($index, row.areas)"
-                                                 on-outside-click="clickOutsideCell($index, row.areas)">
+                                                 on-outside-click="clickOutsideCell($index, row.areas)"
+                                                 bind-click-on="{{area.active}}">
 
                                                  <!-- Cell placeholder -->
                                                  <div class="umb-cell-content -placeholder" ng-if="area.controls.length === 0">
@@ -138,7 +140,8 @@
                                                               ng-repeat="control in area.controls"
                                                               ng-click="clickControl($index, area.controls)"
                                                               ng-class="{'-active': control.active}"
-                                                              on-outside-click="clickOutsideControl($index, area.controls)">
+                                                              on-outside-click="clickOutsideControl($index, area.controls)"
+                                                              bind-click-on="{{control.active}}">
 
                                                               <div class="umb-control-click-overlay" ng-show="!control.active"></div>