deep troubling situation with angular 5 and slow typing into input boxes

Question

There is a problem that is posing itself as a show-stopper or deal-breaker. We've completed a web app, using angular 5 & template driven forms where everything works but this one feature is just killing us. It's like a sniper shot.

From time to time, on our laptops and desktops, we experience slow typing into the text fields of our application's input fields. And this happens across the board, ( that is windows, mac, safari, chrome ).

The situation lasts for a while and then it totally goes away! During the happening, there is no indication of anything we can detect (other than the symptom itself ). I mean there are no console log errors, no high CPU activity, no nothing!.

The problem is that we simply observe some delay ( up to a second ) in the appearance of the letters we type in, into the textfields and textrea boxes.

How would you debug this situation?

So far, I have applies the following solutions; spellcheck=no, autocapitalize=off autocomplete=off autocorrect=off But this does not put an end to this saga.

I also compile the app using the "ng build --prod" so it is totally optimized.

Are there any other suggestions you can offer?

Here is how a sample textarea HTML is:

<textarea placeholder="enter text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"  name="description" [(ngModel)]="learningPlan.description"   maxlength="1500" #local_description="ngModel"></textarea>

Is it possible to tell angular to not to do the change detection on these input boxes while typing is going on? I'm running out of options.

There is one possible suggestion in this link whereby someone is suggesting to do this: @Output() event : EventEmitter<any> = new EventEmitter(false); But it does not say where this line of code is supposed to go in.

Answer 1

I've found this discussion ionic issue 10837 and i've solved with content on this link.

---

In my case, this problem was visible when i typed inside a modal. So, my code turned into this:

constructor(public changeDetection: ChangeDetectorRef) {}

openModal() {
    this.changeDetection.detach();
    //open modal
    modal.callback ( r => {
        this.changeDetection.reattach();
    });
}

Answer 2

Try to use enableProdMode. You enable it by:

 import {enableProdMode} from '@angular/core';
 :

 enableProdMode();
 platformBrowserDynamic().bootstrapModule(AppModule);