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

Input: Fix a bug with on click event and search reset value

This commit is contained in:
Konstantinos Triantafyllou 2022-04-06 12:53:26 +03:00
parent 6de4cf1282
commit 592cbfdf48
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
sharedComponents/input/input.component.ts
View File

@ -105,7 +105,7 @@ declare var UIkit;
</div>
</div>
<div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox
uk-dropdown="pos: bottom-justify; mode: click; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions; let i=index" [class.uk-active]="(formControl.value === option.value) || selectedIndex === i"
[attr.uk-tooltip]="(tooltip)?('title: ' + option.label + ';'):null">
@ -237,19 +237,19 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) {
if(this.opened) {
if(event.key === 'ArrowUp') {
if(event.code === 'ArrowUp') {
event.preventDefault();
if(this.selectedIndex > 0) {
this.selectedIndex--;
this.optionBox.nativeElement.scrollBy(0, -34);
}
} else if(event.key === 'ArrowDown') {
} else if(event.code === 'ArrowDown') {
event.preventDefault();
if(this.selectedIndex < (this.filteredOptions.length - 1)) {
this.selectedIndex++;
this.optionBox.nativeElement.scrollBy(0, 34);
}
} else if(event.key === 'Enter') {
} else if(event.code === 'Enter') {
event.preventDefault();
if(this.filteredOptions[this.selectedIndex]) {
this.selectOption(this.filteredOptions[this.selectedIndex], event);
@ -261,7 +261,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('document:click', ['$event'])
click(event) {
this.focus(this.inputBox && this.inputBox.nativeElement.contains(event.target), event);
if(event.isTrusted) {
this.focus(this.inputBox && this.inputBox.nativeElement.contains(event.target), event);
}
}
ngOnInit() {
@ -333,7 +335,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
if (!this.searchControl) {
this.searchControl = new FormControl('', this.validators);
}
this.searchControl.setValue(this.getLabel(this.formControl.value));
if(this.formAsControl) {
this.searchControl.setValue(this.getLabel(this.formControl.value));
}
this.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
this.filteredOptions = this.filter(value);
this.cdr.detectChanges();
@ -360,8 +364,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else {
this.formControl.markAsDirty();
}
if (this.searchControl) {
this.searchControl.setValue(this.type === 'autocomplete' ? this.getLabel(this.formControl.value) : null);
if (this.searchControl && this.formAsControl) {
this.searchControl.setValue(this.getLabel(this.formControl.value));
}
this.valueChange.emit(this.formControl.value);
}));
@ -446,7 +450,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else {
this.open(false);
if (this.searchControl) {
this.searchControl.setValue(this.getLabel(this.formControl.value));
if(this.formAsControl) {
this.searchControl.setValue(this.getLabel(this.formControl.value));
}
this.add(event);
}
}