Merge pull request #897 from umbraco/temp-U4-7070

Fixes: U4-7070 UX - Mediapicker autofocus when creating a folder

src/Umbraco.Web.UI.Client/src/common/directives/util.directive.js

@@ -1,5 +1,5 @@
 /**
-* @description Utillity directives for key and field events
+* @description Utility directives for key and field events
 **/
 angular.module('umbraco.directives')
 

src/Umbraco.Web.UI.Client/src/common/directives/util/focuswhen.directive.js

@@ -4,7 +4,9 @@ angular.module("umbraco.directives").directive('focusWhen', function ($timeout)
         link: function (scope, elm, attrs, ctrl) {
             attrs.$observe("focusWhen", function (newValue) {
                 if (newValue === "true") {
-                    elm.focus();
+                    $timeout(function() {
+                        elm.focus();
+                    });
                 }
             });
         }

src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.controller.js

@@ -34,11 +34,12 @@ angular.module("umbraco")
             $scope.submitFolder = function(e) {
                 if (e.keyCode === 13) {
                     e.preventDefault();
-                    $scope.showFolderInput = false;
-
+                    
                     mediaResource
                         .addFolder($scope.newFolderName, $scope.options.formData.currentFolder)
                         .then(function(data) {
+                            $scope.showFolderInput = false;
+                            $scope.newFolderName = "";
 
                             //we've added a new folder so lets clear the tree cache for that specific item
                             treeService.clearCache({
@@ -80,7 +81,7 @@ angular.module("umbraco")
                 $scope.options.formData.currentFolder = folder.id;
                 $scope.currentFolder = folder;      
             };
-
+            
             //This executes prior to the whole processing which we can use to get the UI going faster,
             //this also gives us the start callback to invoke to kick of the whole thing
             $scope.$on('fileuploadadd', function (e, data) {

src/Umbraco.Web.UI.Client/src/views/common/dialogs/mediapicker.html

@@ -103,7 +103,8 @@
                                ng-show="showFolderInput"
                                ng-model="newFolderName"
                                ng-keydown="submitFolder($event)"
-                               on-blur="showFolderInput = false">
+                               on-blur="showFolderInput = false"
+                               focus-when="{{showFolderInput}}">
                     </li>
                 </ul>
             </div>