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

Search input: on reset focus input and on enter select option then search. Input: If autocomplete_soft is selected then do notselect item from the list by default and close dropdown on enter.

This commit is contained in:
Konstantinos Triantafyllou 2022-06-09 15:25:24 +03:00
parent 07c990824e
commit 56d42bcd71
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -310,8 +310,11 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
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);
this.open(false);
} }
this.open(false);
event.stopPropagation();
} else {
this.focus(false, event);
} }
} }
@ -531,7 +534,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
this.cdr.detectChanges(); this.cdr.detectChanges();
if (this.optionBox && this.opened) { if (this.optionBox && this.opened) {
this.selectedIndex = this.filteredOptions.findIndex(option => option.value === this.formControl.value); this.selectedIndex = this.filteredOptions.findIndex(option => option.value === this.formControl.value);
if (this.selectedIndex === -1) { if (this.selectedIndex === -1 && this.type !== 'autocomplete_soft') {
this.selectedIndex = 0; this.selectedIndex = 0;
} }
UIkit.dropdown(this.optionBox.nativeElement).show(); UIkit.dropdown(this.optionBox.nativeElement).show();

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

@ -23,7 +23,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
<div class="uk-width-expand"> <div class="uk-width-expand">
<div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null" <div #input [class.uk-hidden]="hidden" input [formInput]="searchControl" inputClass="search" [disabledIcon]="null"
[placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)" [placeholder]="{label: placeholder, static: true}" [value]="value" (valueChange)="valueChange.emit($event)"
[disabled]="disabled" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div> [disabled]="disabled" [showOptionsOnEmpty]="false" [type]="(options.length > 0?'autocomplete_soft':'text')" [options]="options"></div>
</div> </div>
<div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto"> <div [class.uk-hidden]="(!searchControl?.value && !value) || disabled" class="uk-width-auto">
<button class="uk-close uk-icon" (click)="reset()"> <button class="uk-close uk-icon" (click)="reset()">
@ -60,9 +60,13 @@ export class SearchInputComponent implements OnInit {
@HostListener('window:keydown.enter', ['$event']) @HostListener('window:keydown.enter', ['$event'])
enter(event: KeyboardEvent) { enter(event: KeyboardEvent) {
if(this.input.focused) { if(this.input.focused && !this.input.opened) {
event.preventDefault(); event.preventDefault();
this.search(event); this.search(event);
} else {
this.input.enter(event);
event.stopPropagation();
this.search(event);
} }
} }
@ -101,6 +105,9 @@ export class SearchInputComponent implements OnInit {
} else { } else {
this.valueChange.emit(''); this.valueChange.emit('');
} }
setTimeout(() => {
this.input.focus(true);
}, 100)
} }
get hidden(): boolean { get hidden(): boolean {