<p dir="auto">Yesterday, I saw a bug in the behaviour of inputs with ngModel set. When you have some text in the input already and you put the cursor before that text and start typing really fast (press all buttons of your keyboard), the cursor jumps to the end of the string. The issue also occurs in textareas making them unusable.</p>
<p dir="auto"><a href="http://plnkr.co/edit/KJeHOPtDW2J7CBLFZsPb?p=preview" rel="nofollow">http://plnkr.co/edit/KJeHOPtDW2J7CBLFZsPb?p=preview</a></p>
<p dir="auto">Without fixing this, inputs and textareas are unusable since writing something in the middle of the content is an important feature.</p>
<p dir="auto">Tested browsers: Chrome 47.0.2526.106 (64-bit), Firefox 43.0.3</p>
<p dir="auto">When you type extremely fast, the [(ng-model)] behaves buggy.</p>
<p dir="auto">When I did a debug I found next condition inside NgModel directive:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (isPropertyUpdated(changes, this.viewModel)) {
  this._control.updateValue(this.model);
  this.viewModel = this.model;
}"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-en">isPropertyUpdated</span><span class="pl-kos">(</span><span class="pl-s1">changes</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">viewModel</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">_control</span><span class="pl-kos">.</span><span class="pl-en">updateValue</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">model</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">viewModel</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">model</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><a href="https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_model.ts#L81">Here</a> is the reference to the source.<br>
I suppose that the code inside this condition should run only when the model property is updated by the user of ng-model directive. Actually, when you try to type, for instance, '123123' very very fast the events, that are emitted by the code below, notify the model in late.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  viewToModelUpdate(newValue: any): void {
    this.viewModel = newValue;
    ObservableWrapper.callEmit(this.update, newValue);
  }"><pre class="notranslate">  <span class="pl-en">viewToModelUpdate</span><span class="pl-kos">(</span><span class="pl-s1">newValue</span>: any<span class="pl-kos">)</span>: <span class="pl-k">void</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">viewModel</span> <span class="pl-c1">=</span> <span class="pl-s1">newValue</span><span class="pl-kos">;</span>
    <span class="pl-smi">ObservableWrapper</span><span class="pl-kos">.</span><span class="pl-en">callEmit</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">update</span><span class="pl-kos">,</span> <span class="pl-s1">newValue</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span></pre></div>
<p dir="auto"><a href="https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/ng_model.ts#L95">Here</a> is the reference to the source.<br>
This lateness causes update of the <code class="notranslate">_control</code> and then of input itself, due to next code:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  // model -&gt; view
  control.registerOnChange(newValue =&gt; dir.valueAccessor.writeValue(newValue));"><pre class="notranslate">  <span class="pl-c">// model -&gt; view</span>
  <span class="pl-s1">control</span><span class="pl-kos">.</span><span class="pl-en">registerOnChange</span><span class="pl-kos">(</span><span class="pl-s1">newValue</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">dir</span><span class="pl-kos">.</span><span class="pl-c1">valueAccessor</span><span class="pl-kos">.</span><span class="pl-en">writeValue</span><span class="pl-kos">(</span><span class="pl-s1">newValue</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><a href="https://github.com/angular/angular/blob/master/modules/angular2/src/common/forms/directives/shared.ts#L41">Here</a> is the reference to the source.<br>
This process isn't visible to human eye due to its speed, but when you debug it looks like the input box is .</p>
<p dir="auto">I work on laptop with Windows 10. I successfully reproduced it on latest Chrome version and latest Edge version. Also tried on latest Firefox, but it reproduces less frequently (I believe that it is due to slower event dispatch).</p>
<p dir="auto">You can reproduce it <a href="http://plnkr.co/edit/4PVILSxFJCMQipiY3gUT?p=preview" rel="nofollow">here</a>, but you should debug the source of angular. You can do it by hitting break point inside next condition</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (shared_1.isPropertyUpdated(changes, this.viewModel))"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">shared_1</span><span class="pl-kos">.</span><span class="pl-en">isPropertyUpdated</span><span class="pl-kos">(</span><span class="pl-s1">changes</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">viewModel</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos"></span></pre></div>
<p dir="auto">under <code class="notranslate">NgModel.prototype.ngOnChanges</code> function.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/168aebf72088f79836ee58341c2895326b01bf00ba78cc252a8ada354b41d492/687474703a2f2f692e67697068792e636f6d2f323674503839507538315557374d617a4b2e676966"><img src="https://camo.githubusercontent.com/168aebf72088f79836ee58341c2895326b01bf00ba78cc252a8ada354b41d492/687474703a2f2f692e67697068792e636f6d2f323674503839507538315557374d617a4b2e676966" alt="reproducing" data-animated-image="" data-canonical-src="http://i.giphy.com/26tP89Pu81UW7MazK.gif" style="max-width: 100%;"></a><br>
Note, that you have to write <strong>extremely</strong> fast!</p>