Use ng-click directive to process state change

frontend/app/components/wp-buttons/create-button/create-button.directive.js

@@ -52,10 +52,18 @@ function WorkPackageCreateButtonController($state, ProjectService) {
       canCreate= false;
 
   vm.text = I18n.t('js.toolbar.unselected_title');
+
   vm.isDisabled = function () {
     return !inProjectContext || !canCreate || $state.includes('**.new') || !vm.types;
   };
 
+  vm.createWorkPackage = function (type) {
+    $state.go(vm.stateName, {
+      projectPath: vm.projectIdentifier,
+      type: type
+    })
+  };
+
   if (inProjectContext) {
     ProjectService.fetchProjectResource(vm.projectIdentifier).then(function(project) {
       canCreate = !!project.links.createWorkPackage;

frontend/app/components/wp-buttons/create-button/types-drop-down-menu.template.html

@@ -3,9 +3,7 @@
 
   <ul class="dropdown-menu">
     <li ng-repeat="type in vm.types">
-      <a role="menuitem" focus="{{ !$index }}"
-          ui-sref="{{ vm.stateName }}({projectPath: vm.projectIdentifier, type: type.id})">
-
+      <a role="menuitem" focus="{{ !$index }}" ng-click="vm.createWorkPackage(type.id)">
         {{type.name}}
       </a>
     </li>