diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js
index 9c5f5c09f8..bd4279a161 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblockedfield.directive.js
@@ -13,35 +13,53 @@
 
 		function link(scope, el, attr, ngModel) {
 
-			// if locked state is not defined as an attr set default state
-			if (scope.locked === undefined || scope.locked === null) {
-				scope.locked = true;
-			}
+			var input = el.children('.umb-locked-field__input');
 
-			// if locked state is not defined as an attr set default state
-			if (scope.placeholderText === undefined || scope.placeholderText === null) {
-				scope.placeholderText = "Enter value...";
-			}
+			function activate() {
 
-			scope.toggleLock = function() {
-
-				scope.locked = !scope.locked;
-
-				if (scope.locked === false) {
-					autoFocusField();
+				// if locked state is not defined as an attr set default state
+				if (scope.locked === undefined || scope.locked === null) {
+					scope.locked = true;
 				}
 
+				// if locked state is not defined as an attr set default state
+				if (scope.placeholderText === undefined || scope.placeholderText === null) {
+					scope.placeholderText = "Enter value...";
+				}
+
+			}
+
+			scope.lock = function() {
+				scope.locked = true;
+				input.unbind("blur");
+			};
+
+			scope.unlock = function() {
+				scope.locked = false;
+				autoFocusField();
 			};
 
 			function autoFocusField() {
 
-				// timeout to make sure dom has updated from a disabled field
+				var onBlurHandler = function() {
+					scope.$apply(function(){
+						scope.lock();
+					});
+				};
+
 				$timeout(function() {
-					var input = el.children('.umb-locked-field__input');
 					input.focus();
+					input.on("blur", onBlurHandler);
 				});
 
 			}
+
+			activate();
+
+			scope.$on('$destroy', function() {
+				input.unbind('blur');
+			});
+
 		}
 
 		var directive = {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
index d21515ec5a..91f08da5f8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-locked-field.html
@@ -1,7 +1,11 @@
 <div class="umb-locked-field">
 
-	<a href="" ng-click="toggleLock()" class="umb-locked-field__toggle">
-		<i class="umb-locked-field__lock-icon" ng-class="{'icon-lock': locked, 'icon-unlocked': !locked, '-unlocked': !locked}"></i>
+	<a ng-if="locked" href="" ng-click="unlock()" class="umb-locked-field__toggle">
+		<i class="umb-locked-field__lock-icon icon-lock"></i>
+	</a>
+
+	<a ng-if="!locked" href="" ng-click="lock()" class="umb-locked-field__toggle">
+		<i class="umb-locked-field__lock-icon icon-unlocked -unlocked"></i>
 	</a>
 
 	<input