Increase debounce time in multi auto complete in order to avoid addition of search value and first option from dropdown in chips'list.
This commit is contained in:
parent
5733796674
commit
b6709bac3c
|
@ -1,5 +1,5 @@
|
||||||
import { FocusMonitor } from '@angular/cdk/a11y';
|
import { FocusMonitor } from '@angular/cdk/a11y';
|
||||||
import { BACKSPACE, COMMA, ENTER } from '@angular/cdk/keycodes';
|
import { BACKSPACE, ENTER } from '@angular/cdk/keycodes';
|
||||||
import { Component, DoCheck, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Optional, Output, Self, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
|
import { Component, DoCheck, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Optional, Output, Self, SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
|
||||||
import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
|
import { ControlValueAccessor, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
|
||||||
import { MatChipInputEvent } from '@angular/material/chips';
|
import { MatChipInputEvent } from '@angular/material/chips';
|
||||||
|
@ -11,7 +11,7 @@ import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/mu
|
||||||
import { BaseComponent } from '@common/base/base.component';
|
import { BaseComponent } from '@common/base/base.component';
|
||||||
import { isNullOrUndefined } from '@swimlane/ngx-datatable';
|
import { isNullOrUndefined } from '@swimlane/ngx-datatable';
|
||||||
import { BehaviorSubject, combineLatest, Observable, of as observableOf, Subject, Subscription } from 'rxjs';
|
import { BehaviorSubject, combineLatest, Observable, of as observableOf, Subject, Subscription } from 'rxjs';
|
||||||
import {debounceTime, distinctUntilChanged, map, mergeMap, startWith, takeUntil, switchMap, tap} from 'rxjs/operators';
|
import {debounceTime, distinctUntilChanged, map, startWith, takeUntil, switchMap, tap} from 'rxjs/operators';
|
||||||
|
|
||||||
export class CustomComponentBase extends BaseComponent {
|
export class CustomComponentBase extends BaseComponent {
|
||||||
constructor(
|
constructor(
|
||||||
|
@ -138,8 +138,8 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.valueAssignSubscription = combineLatest(this.valueOnBlur.asObservable(), this.onSelectAutoCompleteValue.asObservable())
|
this.valueAssignSubscription = combineLatest(this.valueOnBlur.asObservable(), this.onSelectAutoCompleteValue.asObservable())
|
||||||
.pipe(debounceTime(100))
|
.pipe(debounceTime(200))
|
||||||
.subscribe(latest =>{
|
.subscribe(latest => {
|
||||||
const fromBlur = latest[0];
|
const fromBlur = latest[0];
|
||||||
const fromAutoComplete = latest[1];
|
const fromAutoComplete = latest[1];
|
||||||
|
|
||||||
|
@ -277,7 +277,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public onBlur($event: MouseEvent) {
|
public onBlur($event: FocusEvent) {
|
||||||
if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
|
if (this.inputValue && this.inputValue.length > 1 && this.autocomplete.options && this.autocomplete.options.length > 0 && this.autoSelectFirstOptionOnBlur) {
|
||||||
// this.optionSelectedInternal(this.autocomplete.options.first.value);
|
// this.optionSelectedInternal(this.autocomplete.options.first.value);
|
||||||
this.valueOnBlur.next(this.autocomplete.options.first.value);
|
this.valueOnBlur.next(this.autocomplete.options.first.value);
|
||||||
|
@ -379,7 +379,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
|
||||||
|
|
||||||
//Chip Functions
|
//Chip Functions
|
||||||
_addItem(event: MatChipInputEvent): void {
|
_addItem(event: MatChipInputEvent): void {
|
||||||
console.log(this._items)
|
|
||||||
const input = event.input;
|
const input = event.input;
|
||||||
const value = event.value;
|
const value = event.value;
|
||||||
// Add our fruit
|
// Add our fruit
|
||||||
|
|
Loading…
Reference in New Issue