MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Search Input: Change conditions and add value change emitter. Advanced Search Input: Unfocus on enter

This commit is contained in:
Konstantinos Triantafyllou 2022-04-08 15:47:03 +03:00
parent 41ef72e738
commit 4deb378f2d
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
sharedComponents/advanced-search-input/advanced-search-input.component.ts
View File

@ -38,8 +38,10 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy
@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
if(this.inputs.toArray().filter(input => input.focused).length > 0) {
let input = this.inputs.toArray().find(input => input.focused);
if(input) {
if(event.code === 'Enter') {
input.focus(false, event);
event.preventDefault();
this.searchEmitter.emit();
}

7
sharedComponents/search-input/search-input.component.ts
View File

@ -16,14 +16,14 @@ import {InputComponent} from "../input/input.component";
@Component({
selector: '[search-input]',
template: `
<div *ngIf="searchControl || value" class="uk-flex uk-flex-right uk-width-1-1">
<div class="uk-flex uk-flex-right uk-width-1-1">
<div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
<div class="uk-flex uk-flex-middle">
<div class="uk-width-expand">
<div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [(value)]="value"
<div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
[disabled]="disabled" [formInput]="searchControl"></div>
</div>
<div [class.uk-hidden]="!searchControl.value" class="uk-width-auto">
<div [class.uk-hidden]="!searchControl?.value && !value" class="uk-width-auto">
<a class="uk-link-text" (click)="reset()">
<icon name="close" [flex]="true"></icon>
</a>
@ -43,6 +43,7 @@ export class SearchInputComponent implements OnInit {
@Input() searchInputClass: string = 'inner';
@Input() searchControl: AbstractControl;
@Input() value: string;
@Output() valueChange = new EventEmitter<string>();
@Input() placeholder: string;
@Input() expandable: boolean = false;
@Output() searchEmitter: EventEmitter<void> = new EventEmitter<void>();