single autocomplete fix

This commit is contained in:
Diamantis Tziotzios 2024-04-26 10:17:57 +03:00
parent 9c2f8ecf4e
commit de03e4776b
3 changed files with 12 additions and 11 deletions

View File

@ -307,7 +307,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
startWith(null), startWith(null),
debounceTime(this.requestDelay), debounceTime(this.requestDelay),
distinctUntilChanged(), distinctUntilChanged(),
distinctUntilChanged(),
mergeMap(query => this.filter(query)), mergeMap(query => this.filter(query)),
catchError(error => { catchError(error => {
this._items = null; this._items = null;

View File

@ -37,7 +37,7 @@
</mat-option> </mat-option>
</ng-container> </ng-container>
<ng-template #noItems> <ng-template #noItems>
<mat-option *ngIf="(queryValue || loadDataOnStart) && queryValue == inputValue" disabled="true">No results found!</mat-option> <mat-option disabled="true">No results found!</mat-option>
</ng-template> </ng-template>
</div> </div>
<ng-template #loading> <ng-template #loading>
@ -45,4 +45,4 @@
</ng-template> </ng-template>
</span> </span>
</mat-autocomplete> </mat-autocomplete>
</div> </div>

View File

@ -8,8 +8,8 @@ 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 } from 'rxjs'; import { Observable, Subject, of as observableOf, of } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith, switchMap, takeUntil, tap } from 'rxjs/operators'; import { catchError, debounceTime, distinctUntilChanged, map, mergeMap, startWith, switchMap, takeUntil, tap } from 'rxjs/operators';
export class CustomComponentBase extends BaseComponent { export class CustomComponentBase extends BaseComponent {
@ -64,8 +64,6 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
_groupedItems: Observable<AutoCompleteGroup[]>; _groupedItems: Observable<AutoCompleteGroup[]>;
_selectedItems: Map<string, any> = new Map<any, any>(); _selectedItems: Map<string, any> = new Map<any, any>();
queryValue: string = "";
get empty() { return (this.value == null) && (!this.inputValue || this.inputValue.length === 0); } get empty() { return (this.value == null) && (!this.inputValue || this.inputValue.length === 0); }
get shouldLabelFloat() { return this.focused || !this.empty; } get shouldLabelFloat() { return this.focused || !this.empty; }
@ -220,7 +218,7 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
// prevent filtering results if arrow were pressed // prevent filtering results if arrow were pressed
if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) { if (event.keyCode !== ENTER && (event.keyCode < 37 || event.keyCode > 40)) {
if (this.inputValue.length === 0 && this.value != null) { if (this.inputValue.length === 0 && this.value != null) {
this.optionSelectedInternal(null); this._onInputFocus();
} }
this._inputSubject.next(this.inputValue); this._inputSubject.next(this.inputValue);
} }
@ -237,9 +235,13 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
startWith(null), startWith(null),
debounceTime(this.requestDelay), debounceTime(this.requestDelay),
distinctUntilChanged(), distinctUntilChanged(),
tap(query => this.queryValue = query), mergeMap(query => this.filter(query)),
switchMap(query => this.filter(query))); catchError(error => {
this._items = null;
console.error(error);
return of(null)
})
);
if (this.configuration.groupingFn) { this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items))); } if (this.configuration.groupingFn) { this._groupedItems = this._items.pipe(map(items => this.configuration.groupingFn(items))); }
} }
} }