inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-1924] - Some issues related to search bar (#2702)

Browse Source 
* issue #1

Because the input element gets no focus when the search button is clicked, there is no way to toggle off the search input, when user clicks outside the search bar
Added focus on search input when the user click on search input

issue #2

Increased the width of the search results container in order to be able to show more text
translated results container to the left in order to prevent it to overlap the menu items from the navigation bar

* Adding test spec for checking if search input has focus after the user clicks on search button

* removed deprecated render dependency
using this call
	" searchInput.nativeElement.focus()"
to enable input focus

* fixed broken animation on input search focus()

* Fix search control component tests

* Fix rebasing
This commit is contained in:
mihai sirghe
2017-11-28 18:24:27 +02:00
committed by Eugenio Romano
parent c763ba45e0
commit 634e65af96
4 changed files with 64 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
lib/content-services/search/components/search-control.component.ts
View File

@@ -78,8 +78,8 @@ export class SearchControlComponent implements OnInit, OnDestroy {
@ViewChild(SearchComponent)
searchAutocomplete: SearchComponent;
@ViewChild('inputSearch')
inputSearch: ElementRef;
@ViewChild('searchInput')
searchInput: ElementRef;
@ViewChildren(MatListItem)
private listResultElement: QueryList<MatListItem>;
@@ -100,14 +100,20 @@ export class SearchControlComponent implements OnInit, OnDestroy {
if (this.subscriptAnimationState === 'inactive') {
this.searchTerm = '';
this.searchAutocomplete.resetResults();
if ( document.activeElement.id === this.inputSearch.nativeElement.id) {
this.inputSearch.nativeElement.blur();
if ( document.activeElement.id === this.searchInput.nativeElement.id) {
this.searchInput.nativeElement.blur();
}
}
}
});
}
applySearchFocus(animationDoneEvent) {
if (animationDoneEvent.toState === 'active') {
this.searchInput.nativeElement.focus();
}
}
ngOnInit() {
this.subscriptAnimationState = this.expandable ? 'inactive' : 'no-animation';
this.setupFocusEventHandlers();
@@ -205,7 +211,7 @@ export class SearchControlComponent implements OnInit, OnDestroy {
if (previousElement) {
previousElement.focus();
}else {
this.inputSearch.nativeElement.focus();
this.searchInput.nativeElement.focus();
this.focusSubject.next(new FocusEvent('focus'));
}
}