Add blur handler to autocomplete

app/assets/stylesheets/layout/_breadcrumb.sass

@@ -94,12 +94,16 @@ ul.breadcrumb
 .wp-breadcrumb
   margin-top: 10px
   height: initial
+
   ul.breadcrumb
     height: initial
-    li
-      line-height: 20px
-      max-width: 420px
-      @include text-shortener
+
+  li
+    line-height: 20px
+
+  .wp-breadcrumb--ellipsed
+    max-width: 420px
+    @include text-shortener
 
 // This is ugly. However, this way we do not need to touch complicated
 // toolbar-container positioning.

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb-parent.component.ts

@@ -68,13 +68,16 @@ export class WorkPackageBreadcrumbParentComponent {
     return this.editing;
   }
 
-  public toggle():void {
-    this.editing = !this.editing;
-    this.onSwitch.emit(this.editing);
+  public close():void {
+    this.toggle(false);
+  }
+
+  public open():void {
+    this.toggle(true);
   }
 
   public updateParent(newParentId:string|null) {
-    this.toggle();
+    this.close();
     if (_.isNil(newParentId)) {
       newParentId = null;
     }
@@ -90,6 +93,13 @@ export class WorkPackageBreadcrumbParentComponent {
       })
       .then(() => this.isSaving = false); // Behaves as .finally()
   }
+
+  private toggle(state:boolean) {
+    if (this.editing !== state) {
+      this.editing = state;
+      this.onSwitch.emit(this.editing);
+    }
+  }
 }
 
 

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb-parent.html

@@ -7,7 +7,7 @@
     <span [textContent]="parent.name"></span>
   </a>
   <accessible-by-keyboard
-    (execute)="toggle()"
+    (execute)="open()"
     *ngIf="canModifyParent()"
     [linkTitle]="parent ? text.edit_parent : text.set_parent"
     linkClass="wp-relation--parent-change">
@@ -19,7 +19,8 @@
   *ngIf="active"
   [inputPlaceholder]="text.set_or_remove_parent"
   [workPackage]="workPackage"
-  (onEscape)="this.toggle()"
+  (onEscape)="close()"
+  (onBlur)="close()"
   (onWorkPackageIdSelected)="updateParent($event)"
   filterCandidatesFor="parent">
 </wp-relations-autocomplete-upgraded>

frontend/src/app/components/work-packages/wp-breadcrumb/wp-breadcrumb.html

@@ -5,17 +5,21 @@
       <li>
         <span>{{ hierarchyLabel }}: </span>
       </li>
-      <li *ngFor="let ancestor of workPackage.ancestors; let first = first ; let last = last"
-          [ngClass]="{ 'icon4 icon-small icon-arrow-right5': !first }">
-        <a *ngIf="!last"
-          [attr.title]="ancestor.name"
-          [textContent]="ancestor.name"
-          uiSref="work-packages.show.activity"
-          [uiParams]="{workPackageId: ancestor.id}"
-          class="breadcrumb-project-title nocut"></a>
-      </li>
+      <ng-container *ngFor="let ancestor of workPackage.ancestors; let first = first ; let last = last">
+        <li
+            *ngIf="!last"
+            class="wp-breadcrumb--ellipsed"
+            [ngClass]="{ 'icon4 icon-small icon-arrow-right5': !first }">
+          <a [attr.title]="ancestor.name"
+             [textContent]="ancestor.name"
+             uiSref="work-packages.show.activity"
+             [uiParams]="{workPackageId: ancestor.id}"
+             class="breadcrumb-project-title nocut"></a>
+        </li>
+      </ng-container>
     </ng-container>
-    <li [ngClass]="{ 'active-parent-select': inputActive }">
+    <li
+        [ngClass]="{ 'active-parent-select': inputActive, 'icon4 icon-small icon-arrow-right5': !inputActive && hierarchyCount > 1 }">
       <wp-breadcrumb-parent (onSwitch)="inputActive = !inputActive" [workPackage]="workPackage"></wp-breadcrumb-parent>
     </li>
   </ul>

frontend/src/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.upgraded.component.ts

@@ -26,7 +26,7 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-import {Component, ElementRef, EventEmitter, Inject, Input, OnInit, Output} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {PathHelperService} from 'core-app/modules/common/path-helper/path-helper.service';
 import {I18nService} from 'core-app/modules/common/i18n/i18n.service';
 import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
@@ -37,7 +37,7 @@ import {CollectionResource} from 'core-app/modules/hal/resources/collection-reso
   selector: 'wp-relations-autocomplete-upgraded',
   templateUrl: './wp-relations-autocomplete.upgraded.html'
 })
-export class WpRelationsAutocompleteComponent implements OnInit {
+export class WpRelationsAutocompleteComponent implements OnInit, OnDestroy {
   readonly text = {
     placeholder: this.I18n.t('js.relations_autocomplete.placeholder')
   };
@@ -52,6 +52,7 @@ export class WpRelationsAutocompleteComponent implements OnInit {
 
   @Output('onWorkPackageIdSelected') public onSelect = new EventEmitter<string|null>();
   @Output('onEscape') public onEscapePressed = new EventEmitter<KeyboardEvent>();
+  @Output('onBlur') public onBlur = new EventEmitter<FocusEvent>();
 
   public options:any = [];
   public relatedWps:any = [];
@@ -106,11 +107,24 @@ export class WpRelationsAutocompleteComponent implements OnInit {
     setTimeout(() => input.focus(), 20);
   }
 
+  ngOnDestroy():void {
+    this.$element = jQuery(this.elementRef.nativeElement);
+
+    // Remove any open autocompleter, if we're being killed
+    this.$element.find('.wp-relations-autocomplete--results').remove();
+  }
+
   public handleEnterPressed($event:KeyboardEvent) {
-    const val = ($event.target as HTMLInputElement).value;
+    let val = ($event.target as HTMLInputElement).value;
     if (!val) {
         this.onSelect.emit(null);
     }
+
+    // If trying to enter work package ID
+    if (val.match(/^#?\d+$/)) {
+      val = val.replace(/^#/, '');
+      this.onSelect.emit(val);
+    }
   }
 
   private getIdentifier(workPackage:WorkPackageResource):string {

frontend/src/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.upgraded.html

@@ -4,6 +4,7 @@
          [ngClass]="{ '-error': noResults && !initialSelection }"
          (keydown.enter)="handleEnterPressed($event)"
          (keydown.escape)="onEscapePressed.emit($event)"
+         (blur)="onBlur.emit($event)"
          [attr.placeholder]="inputPlaceholder">
   <div class="ui-autocomplete--loading" style="display: none">
     <div class="loading-indicator -small">