Rxjs - DistinctUntilChanged() with keyup event

Question

I'm using Rxjs 6 which filters an observable returned by Firebase based on (keyup) event in a form field.

I have an issue when the user keeps pressing backspace while there is no value in the form field, then it looks like the observable is constantly refreshed.

Adding a pipe with DistinctUntilChanged() doesn't seem to be effective:

Typescript Filter Function:

updateFilter2() {
    const val = this.filteredValue.toLowerCase().toString().trim();

    if (this.filteredValue) {
        this.loadingIndicator = true;
        this.rows = this.svc.getData()
            .pipe(
                distinctUntilChanged(),
                debounceTime(300),
                map(_co => _co.filter(_company =>
                    _company['company'].toLowerCase().trim().indexOf(val) !== -1 || !val
                    ||
                    _company['name'].toLowerCase().trim().indexOf(val) !== -1 || !val
                    ||
                    _company['gender'].toLowerCase().trim().indexOf(val) !== -1 || !val
                )),
                tap(res => {
                    this.loadingIndicator = false;
                })
            );
    }
    else {
        this.rows = this.svc.getData()
            .pipe(distinctUntilChanged())
        this.loadingIndicator = false;
    }

    this.table.offset = 0;
}

HTML Template:

<mat-form-field style="padding:8px;">
    <input
            type='text'
            matInput
            [(ngModel)] = "filteredValue"
            style='padding:8px;margin:15px auto;width:30%;'
            placeholder='Type to filter the name column...'
            (input)='updateFilter2()'
    />
</mat-form-field>

I have a Stackblitz reproducing the behaviour: https://stackblitz.com/edit/angular-nyqcuk

Is there any other way to address it ?

Thanks

Listening to (input) event instead of (keyup) seems to do the trick — Luca Brasi, Jun 07 '18 at 03:23
Please don't link to external sites to provide your code **unless** you have already included a copy of the code **directly in your answer**. If the other site goes down, goes away, or changes its link structure then the question is invalidated. — Enigmativity, Jun 07 '18 at 03:41

score 3 · Accepted Answer · answered Jun 07 '18 at 07:10

The problem is that ALLWAYS make getData. You first look at changes, then switchmap to get Data. So you must have a Observable of changes. Use a "FormControl", not an input with [(ngModel)] So, in your .html

<input type="text" [formControl]="search">

The code must be

  search= new FormControl();       //Declare the formControl

  constructor() {}

  ngOnInit() {
    this.search.valueChanges.pipe(
         debounceTime(400),
         distinctUntilChanged(),
         tap((term)=>{
              //here the value has changed
              this.loadingIndicator = true;
         }),
         switchMap(filteredValue=> {
              //We not return the value changed, 
              return this.svc.getData().pipe(
                     map(_co => {
                         return _co.filter(...)
                     }),
                     tap(()=>{
                         this.loadingIndicator=false;
                     }))
          })).subscribe(result=>{
             this.result=result
          })
  }

Just for completion, FormsModule, ReactiveFormsModule must be imported in the module. https://stackoverflow.com/questions/40262535/how-to-correctly-import-formgroup-in-ngmodule-in-angular-2 — GonzaloUrroz, Aug 08 '18 at 07:28
What does `distinctUntilChanged()` do here? I don't seem to see a difference with it or without it. — DeborahK, Feb 19 '19 at 01:00
@DeborahK, It's only a "check", for if e.g. you type and correct (e.g. type a and remove), make a Ctrl+V, or simlilar — Eliseo, Feb 19 '19 at 07:41

Rxjs - DistinctUntilChanged() with keyup event

1 Answers1

Linked