How to Skip the First Value of Stream Except if It is a Copy Paste With RxJS?

Question

I am currently using skip(1) to avoid unnecessary calculations when the first value is typed. However, I discovered that my users frequently use copy-paste to filter data. As a result, skip(1) skips the entire pasted value.

I want to skip the first typed character only if it does not comes from a pasted value. I am not really interested in the copy paste, but more by the fact that the first value may be the full filter with several characters.

Here's my current code:

    public ngAfterViewInit(): void {
    this.quickFilterValueChange
        .pipe(
            skip(1),
            debounceTime(150),
            distinctUntilChanged(),
            tap(() => {
                this.store.dispatch(someAction);
            }),
            takeUntilDestroyed(this.destroyRef),
        )
        .subscribe();
}

Answer 1

You need to use debounceTime and increase the threshold to skip unnecessary calculations instead of skip which omits the initial value.

The advantage of this is that, if the characters are within the threshold only the last value is taken and the rest is discarded.

I also added a code snippet for filter where we run the logic only when the search string is greater than 3 characters.

public ngAfterViewInit(): void {
    this.quickFilterValueChange
        .pipe(
            // filter(() => this.searchStr.length > 3), // you can also use this to limit the initial typing of the search field.
            debounceTime(500), // <- threshold is 500ms
            distinctUntilChanged(),
            tap(() => {
                this.store.dispatch(someAction);
            }),
            takeUntilDestroyed(this.destroyRef),
        )
        .subscribe();
}