Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Maintenance - Mise à jour mensuelle Lundi 6 Février entre 7h00 et 9h00
Open sidebar
urgi-is
data-discovery
Commits
999595f4
Commit
999595f4
authored
Aug 08, 2018
by
Exbrayat Cédric
Browse files
feat: focus typeahead after selection
parent
14b83e4e
Changes
3
Hide whitespace changes
Inline
Side-by-side
frontend/src/app/large-aggregation/large-aggregation.component.html
View file @
999595f4
...
...
@@ -24,7 +24,7 @@
<button
tabindex=
"-1"
type=
"button"
class=
"btn btn-link"
(click)=
"removeKey(key)"
>
×
</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
View file @
999595f4
...
...
@@ -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
View file @
999595f4
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
)
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment