Fix a bug with options position in modals

This commit is contained in:
Konstantinos Triantafyllou 2022-04-04 13:53:26 +03:00
parent 225285c960
commit f19408b1a8
1 changed files with 68 additions and 63 deletions

View File

@ -41,6 +41,7 @@ declare var UIkit;
@Component({
selector: '[dashboard-input], [input]',
template: `
<div [id]="id">
<div class="input-wrapper" [class.disabled]="formControl.disabled" [class.opened]="opened"
[class.focused]="focused" [ngClass]="inputClass" [class.hint]="hint"
[class.active]="(formAsControl?.value || formAsArray?.length > 0) && !focused"
@ -104,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;">
uk-dropdown="pos: bottom-justify; mode: click; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
<ul class="uk-nav uk-dropdown-nav">
<li *ngFor="let option of filteredOptions" [class.uk-active]="formControl.value === option.value"
[attr.uk-tooltip]="(tooltip)?('title: ' + option.label + ';'):null">
@ -112,6 +113,7 @@ declare var UIkit;
</li>
</ul>
</div>
</div>
<span *ngIf="formControl.invalid && formControl.touched" class="uk-text-danger">
<span *ngIf="formControl.errors.error">{{formControl.errors.error}}</span>
<span *ngIf="type === 'URL' || type === 'logoURL'">Please provide a valid URL (e.g. https://example.com)</span>
@ -133,6 +135,7 @@ declare var UIkit;
`
})
export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChanges {
private static INPUT_COUNTER: number = 0;
/** Deprecated options*/
/** @deprecated */
@Input('label') label: string;
@ -185,6 +188,7 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
/** LogoUrl information */
public secure: boolean = true;
/** Internal basic information */
public id: string;
public placeholderInfo: Placeholder = {label: '', static: true};
public required: boolean = false;
public focused: boolean = false;
@ -221,6 +225,8 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
}
ngOnInit() {
InputComponent.INPUT_COUNTER++;
this.id = 'input-' + InputComponent.INPUT_COUNTER;
if (!this.formControl) {
if (Array.isArray(this.value)) {
this.formControl = new FormArray([]);
@ -350,7 +356,6 @@ export class InputComponent implements OnInit, OnDestroy, AfterViewInit, OnChang
return (this.showOptionsOnEmpty) ? options : [];
}
const filterValue = value.toString().toLowerCase();
console.log(options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1));
return options.filter(option => option.label.toLowerCase().indexOf(filterValue) != -1);
}