MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

fixed single autocomplete panel behavior

This commit is contained in:
Sofia Papacharalampous 2024-04-30 17:43:10 +03:00
parent 49d8df1894
commit e5af155b31
2 changed files with 47 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
View File

@ -4,6 +4,7 @@
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> --> <input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> -->
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon> <mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)"> <mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">
<span *ngIf="_groupedItems"> <span *ngIf="_groupedItems">
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title"> <mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
<mat-option *ngFor="let item of group.items" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)"> <mat-option *ngFor="let item of group.items" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
@ -44,5 +45,6 @@
<mat-option disabled="true">loading...</mat-option> <mat-option disabled="true">loading...</mat-option>
</ng-template> </ng-template>
</span> </span>
</div>
</mat-autocomplete> </mat-autocomplete>
</div> </div>

16
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts
View File

@ -8,7 +8,7 @@ import { MatFormFieldControl } from '@angular/material/form-field';
import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group'; import { AutoCompleteGroup } from '@app/library/auto-complete/auto-complete-group';
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration'; import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { Observable, Subject, of as observableOf, of } from 'rxjs'; import { Observable, Subject, Subscription, of as observableOf, of } from 'rxjs';
import { catchError, debounceTime, distinctUntilChanged, map, mergeMap, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'; import { catchError, debounceTime, distinctUntilChanged, map, mergeMap, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
@ -31,6 +31,9 @@ export const _CustomComponentMixinBase = mixinErrorState(CustomComponentBase);
}) })
export class SingleAutoCompleteComponent extends _CustomComponentMixinBase implements OnInit, MatFormFieldControl<string>, ControlValueAccessor, OnDestroy, DoCheck, OnChanges { export class SingleAutoCompleteComponent extends _CustomComponentMixinBase implements OnInit, MatFormFieldControl<string>, ControlValueAccessor, OnDestroy, DoCheck, OnChanges {
isMouseOverPanel: boolean = false;
panelClosedSubscription: Subscription;
static nextId = 0; static nextId = 0;
@ViewChild('autocomplete', { static: true }) autocomplete: MatAutocomplete; @ViewChild('autocomplete', { static: true }) autocomplete: MatAutocomplete;
@ViewChild('autocompleteTrigger', { static: true }) autocompleteTrigger: MatAutocompleteTrigger; @ViewChild('autocompleteTrigger', { static: true }) autocompleteTrigger: MatAutocompleteTrigger;
@ -115,6 +118,10 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
fm.monitor(elRef.nativeElement, true).pipe(takeUntil(this._destroyed)).subscribe((origin) => { fm.monitor(elRef.nativeElement, true).pipe(takeUntil(this._destroyed)).subscribe((origin) => {
this.focused = !!origin; this.focused = !!origin;
this.stateChanges.next(); this.stateChanges.next();
if (!this.isMouseOverPanel && !this.focused) {
this.autocompleteTrigger?.closePanel();
}
}); });
if (this.ngControl != null) { if (this.ngControl != null) {
@ -124,7 +131,11 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
} }
} }
ngOnInit() { } ngOnInit() {
this.panelClosedSubscription = this.autocomplete.closed.subscribe((next) => {
this.isMouseOverPanel = false;
});
}
ngDoCheck(): void { ngDoCheck(): void {
if (this.ngControl) { if (this.ngControl) {
@ -292,6 +303,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
} }
ngOnDestroy() { ngOnDestroy() {
this.panelClosedSubscription.unsubscribe();
this.stateChanges.complete(); this.stateChanges.complete();
this.fm.stopMonitoring(this.elRef.nativeElement); this.fm.stopMonitoring(this.elRef.nativeElement);
} }