Why is my Angular 5 app blocking the UI when using either setTimeout(), Observable.timer or Observable.interval()?

Question

I'm trying to make my own input search component, but somehow when I start typing within the input text the UI blocks until the timeout reaches the time to be executed. I start checking the angular's documentation about its internal behavior to check if I was doing something wrong or maybe figure something else out. I saw that rxjs has the Observable class where I could use timer() and interval and both didn't work as expected.

This is the code I have written so far for the input-search component:

• Component HTML

<input type="text" (keyup)="onInputChange($event)" class="form-control" />

• component .ts

import { Component, OnInit, Input, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "app-input-search",
  templateUrl: "./input-search.component.html",
  styleUrls: ["./input-search.component.css"]
})
export class InputSearchComponent implements OnInit {
  @Output()
  onChange: EventEmitter<{ event: any; value: string }> = new EventEmitter();
  @Input() milliSeconds: number;

  timeoutHandler: any;

  constructor() {}

  ngOnInit() {}

  onInputChange(e) {
    if (this.milliSeconds && this.milliSeconds > 0) {
      if (this.timeoutHandler) {
        clearTimeout(this.timeoutHandler);
      }
      this.timeoutHandler = setTimeout(
        () => this.onChange.emit({ event: e, value: e.target.value }),
        this.milliSeconds
      );
    } else {
      if (this.timeoutHandler) {
        clearTimeout(this.timeoutHandler);
      }
      this.onChange.emit({ event: e, value: e.target.value });
    }

    return false;
  }
}

Answer 1

I figured it out. It had something to do with the rendering of a dynamic menu. I mean I wasn't using the best approach to handle it.