Commit 999595f4 authored by Exbrayat Cédric's avatar Exbrayat Cédric
Browse files

feat: focus typeahead after selection

parent 14b83e4e
......@@ -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>
......
......@@ -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);
......
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) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment