feat: focus typeahead after selection

frontend/src/app/large-aggregation/large-aggregation.component.html

@@ -24,7 +24,7 @@
         <button tabindex="-1" type="button" class="btn btn-link" (click)="removeKey(key)">&times;</button>
       </span>
     </div>
-    <input class="form-control" [formControl]="criterion" [ngbTypeahead]="search"
+    <input #typeahead class="form-control" [formControl]="criterion" [ngbTypeahead]="search"
            (selectItem)="selectKey($event)" [resultTemplate]="resultTemplate" container="body"/>
   </div>
 </div>

frontend/src/app/large-aggregation/large-aggregation.component.spec.ts

@@ -191,10 +191,16 @@ describe('LargeAggregationComponent', () => {
     tester.results[0].click();
     tester.detectChanges();
 
+    // an event is emitted
     expect(emittedEvent.name).toBe('coo');
     expect(emittedEvent.values).toEqual(['France']);
+
+    // the input is emptied
     expect(tester.inputField).toHaveValue('');
 
+    // the focus is given back to the input
+    expect(tester.element(':focus')).toEqual(tester.inputField);
+
     // and a pill should appear
     expect(tester.pills.length).toBe(1);
     expect(tester.pills[0]).toContainText('France[10]');
@@ -216,6 +222,9 @@ describe('LargeAggregationComponent', () => {
     expect(emittedEvent.name).toBe('coo');
     expect(emittedEvent.values).toEqual(['France', 'Italy']);
 
+    // the focus is given back to the input
+    expect(tester.element(':focus')).toEqual(tester.inputField);
+
     // and another pill should appear
     expect(tester.pills.length).toBe(2);
     expect(tester.pills[0]).toContainText('France[10]');
@@ -264,9 +273,15 @@ describe('LargeAggregationComponent', () => {
     tester.results[tester.results.length - 1].click();
     tester.detectChanges();
 
+    // no event is emitted
     expect(emittedEvent).toBeUndefined();
+
+    // the input value stays the same
     expect(tester.inputField).toHaveValue('a');
 
+    // the focus is given back to the input
+    expect(tester.element(':focus')).toEqual(tester.inputField);
+
     // and a pill should not appear
     expect(tester.pills.length).toBe(0);
 

frontend/src/app/large-aggregation/large-aggregation.component.ts

-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Aggregation, Bucket } from '../models/page';
-import { AggregationCriterion } from '../models/aggregation-criterion';
-import { Observable } from 'rxjs/internal/Observable';
+import { Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
 import { NgbTypeaheadSelectItemEvent } from '@ng-bootstrap/ng-bootstrap';
 
+import { Aggregation, Bucket } from '../models/page';
+import { AggregationCriterion } from '../models/aggregation-criterion';
+
 export type BucketOrRefine = Bucket | 'REFINE';
 
 const maxResultsDisplayed = 8;
@@ -23,9 +24,11 @@ export class LargeAggregationComponent {
   // the component emits an event if the user adds or remove a criterion
   @Output() aggregationChange = new EventEmitter<AggregationCriterion>();
 
+  @ViewChild('typeahead') typeahead: ElementRef<HTMLInputElement>;
+
   criterion = new FormControl('');
 
-  search: (text$: Observable<string>) => Observable<Array<BucketOrRefine>> = text$ =>
+  search = (text$: Observable<string>): Observable<Array<BucketOrRefine>> =>
     text$.pipe(
       debounceTime(200),
       distinctUntilChanged(),
@@ -74,6 +77,7 @@ export class LargeAggregationComponent {
       this.criterion.setValue('');
       this.emitEvent();
     }
+    this.typeahead.nativeElement.focus();
   }
 
   documentCountForKey(key: string) {