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> </div>
<div class="options uk-dropdown" *ngIf="filteredOptions && filteredOptions.length > 0 && opened" #optionBox <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"> <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" <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"> [attr.uk-tooltip]="(tooltip)?('title: ' + option.label + ';'):null">
@ -237,19 +237,19 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('window:keydown', ['$event']) @HostListener('window:keydown', ['$event'])
keyEvent(event: KeyboardEvent) { keyEvent(event: KeyboardEvent) {
if(this.opened) { if(this.opened) {
if(event.key === 'ArrowUp') { if(event.code === 'ArrowUp') {
event.preventDefault(); event.preventDefault();
if(this.selectedIndex > 0) { if(this.selectedIndex > 0) {
this.selectedIndex--; this.selectedIndex--;
this.optionBox.nativeElement.scrollBy(0, -34); this.optionBox.nativeElement.scrollBy(0, -34);
} }
} else if(event.key === 'ArrowDown') { } else if(event.code === 'ArrowDown') {
event.preventDefault(); event.preventDefault();
if(this.selectedIndex < (this.filteredOptions.length - 1)) { if(this.selectedIndex < (this.filteredOptions.length - 1)) {
this.selectedIndex++; this.selectedIndex++;
this.optionBox.nativeElement.scrollBy(0, 34); this.optionBox.nativeElement.scrollBy(0, 34);
} }
} else if(event.key === 'Enter') { } else if(event.code === 'Enter') {
event.preventDefault(); event.preventDefault();
if(this.filteredOptions[this.selectedIndex]) { if(this.filteredOptions[this.selectedIndex]) {
this.selectOption(this.filteredOptions[this.selectedIndex], event); this.selectOption(this.filteredOptions[this.selectedIndex], event);
@ -261,7 +261,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
@HostListener('document:click', ['$event']) @HostListener('document:click', ['$event'])
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() { ngOnInit() {
@ -333,7 +335,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
if (!this.searchControl) { if (!this.searchControl) {
this.searchControl = new FormControl('', this.validators); 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.subscriptions.push(this.searchControl.valueChanges.subscribe(value => {
this.filteredOptions = this.filter(value); this.filteredOptions = this.filter(value);
this.cdr.detectChanges(); this.cdr.detectChanges();
@ -360,8 +364,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else { } else {
this.formControl.markAsDirty(); this.formControl.markAsDirty();
} }
if (this.searchControl) { if (this.searchControl && this.formAsControl) {
this.searchControl.setValue(this.type === 'autocomplete' ? this.getLabel(this.formControl.value) : null); this.searchControl.setValue(this.getLabel(this.formControl.value));
} }
this.valueChange.emit(this.formControl.value); this.valueChange.emit(this.formControl.value);
})); }));
@ -446,7 +450,9 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
} else { } else {
this.open(false); this.open(false);
if (this.searchControl) { 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); this.add(event);
} }
} }