Merge pull request #1808 from opf/feature/14728_wrong_focus_when_deleting_watcher

[Feature] 14728 wrong focus when deleting watcher

app/assets/javascripts/angular/directives/components/focus.js

@@ -29,16 +29,37 @@
 // TODO move to UI components
 angular.module('openproject.uiComponents')
 
-.directive('focus', ['$timeout', function($timeout) {
+.constant('FOCUSABLE_SELECTOR', 'a, button, :input, [tabindex]')
+
+.directive('focus', ['$timeout', 'FOCUSABLE_SELECTOR', function($timeout, FOCUSABLE_SELECTOR) {
+
+  function focusElement(element) {
+    $timeout(function() {
+      var focusable = element;
+
+      if (!focusable.is(FOCUSABLE_SELECTOR)) {
+        focusable = element.find(FOCUSABLE_SELECTOR);
+      }
+
+      focusable[0].focus();
+    });
+  }
+
+  function updateFocus(scope, element, attrs) {
+    var condition = (attrs.focus) ? scope.$eval(attrs.focus) : true;
+
+    if (condition) {
+      focusElement(element);
+    }
+  }
+
   return {
     link: function(scope, element, attrs) {
-      var condition = (attrs.focus) ?  scope.$eval(attrs.focus) : true;
+      updateFocus(scope, element, attrs);
 
-      if (condition) {
-        $timeout(function() {
-          element[0].focus();
-        });
-      }
+      scope.$on('updateFocus', function() {
+        updateFocus(scope, element, attrs);
+      });
     }
   };
 }]);

app/assets/javascripts/angular/work_packages/controllers/details-tab-watchers-controller.js

@@ -28,8 +28,17 @@
 
 angular.module('openproject.workPackages.controllers')
 
-.controller('DetailsTabWatchersController', ['$scope', 'workPackage', 'I18n', function($scope, workPackage, I18n) {
+.constant('ADD_WATCHER_SELECT_INDEX', -1)
+
+.controller('DetailsTabWatchersController',
+            ['$scope',
+             '$timeout',
+             'workPackage',
+             'I18n',
+             'ADD_WATCHER_SELECT_INDEX',
+             function($scope, $timeout, workPackage, I18n, ADD_WATCHER_SELECT_INDEX) {
   $scope.I18n = I18n;
+  $scope.focusElementIndex = ($scope.watchers.length > 0) ? 0 : ADD_WATCHER_SELECT_INDEX;
 
   $scope.$watch('watchers.length', fetchAvailableWatchers); fetchAvailableWatchers();
 
@@ -93,6 +102,8 @@ angular.module('openproject.workPackages.controllers')
   function addWatcherSuccess() {
     $scope.outputMessage(I18n.t("js.label_watcher_added_successfully"));
     $scope.refreshWorkPackage();
+
+    $scope.focusElementIndex = ADD_WATCHER_SELECT_INDEX;
   }
 
   $scope.deleteWatcher = function(watcher) {
@@ -111,9 +122,23 @@ angular.module('openproject.workPackages.controllers')
 
     if (index >= 0) {
       $scope.watchers.splice(index, 1);
+
+      updateWatcherFocus(index);
     }
   }
 
+  function updateWatcherFocus(index) {
+    if ($scope.watchers.length == 0) {
+      $scope.focusElementIndex = ADD_WATCHER_SELECT_INDEX;
+    } else {
+      $scope.focusElementIndex = (index < $scope.watchers.length) ? index : $scope.watchers.length - 1;
+    }
+
+    $timeout(function() {
+      $scope.$broadcast('updateFocus');
+    });
+  }
+
   $scope.selectedWatcher = { id: null };
 
   $scope.$watch('selectedWatcher.id', addWatcher);

public/templates/work_packages/tabs/watchers.html

@@ -2,7 +2,7 @@
   <div id="detail-panel-watchers">
     <ul ng-if="watchers.length">
       <li ng-repeat="watcher in watchers">
-        <user-field user="watcher"></user-field>
+        <user-field focus="$index == focusElementIndex" user="watcher"></user-field>
         <accessible-by-keyboard execute="deleteWatcher(watcher)" ng-if="watcher.links.removeWatcher">
           <icon-wrapper icon-name="close"
                         icon-title="{{I18n.t('js.button_delete_watcher')}}"
@@ -15,7 +15,7 @@
       <h3 ng-bind="I18n.t('js.button_add_watcher')"/>
       <fieldset>
         <legend ng-bind="I18n.t('js.button_add_watcher')" class="hidden-for-sighted"/>
-        <select ng-model="selectedWatcher.id" data-placeholder="{{ I18n.t('js.label_select_watcher') }}" ui-select2>
+        <select focus="focusElementIndex < 0" ng-model="selectedWatcher.id" data-placeholder="{{ I18n.t('js.label_select_watcher') }}" ui-select2>
           <option value=""></option>
           <option ng-repeat="watcher in availableWatchers" value="{{watcher.props.id}}">
             {{watcher.props.name}}