title: NgOnChanges overrides form control value when user types
body: <p>I have autocomplete form control:</p>
  
  <pre><code>@Component({
      selector: 'app-autocomplete',
      templateUrl: './app-autocomplete.view.html',
      changeDetection: ChangeDetectionStrategy.OnPush,
  })
  export class AutoCompleteFilterComponent implements OnInit, OnDestroy, OnChanges {   
  @Input() value: any;
  @Output() onChanged = new EventEmitter();
  autoCompleteControl: FormControl = new FormControl();
  private autoCompleteControlSubscription: Subscription;
  constructor() { }
  
  ngOnInit(): void {
      this.autoCompleteControl.setValue(this.value, { emitEvent: false });
      this.autoCompleteControlSubscription = this.autoCompleteControl.valueChanges
          .pipe(
              skipUndefined(),
              filter(value =&gt; value.length &gt;= 3),
              distinctUntilChanged(),
              debounceTime(350),
              map(value =&gt; {                    
                  this.onChanged.emit(value.trim());
              })
          ).subscribe();
  }
  
  ngOnChanges(changes: SimpleChanges): void {
      if (!changes.value.firstChange) {
          this.autoCompleteControl.setValue(changes.value.currentValue);
      }
  }
  
  ngOnDestroy(): void {
      if (this.autoCompleteControlSubscription) {
          this.autoCompleteControlSubscription.unsubscribe();
      }
  }
  </code></pre>
  
  <p>I get initial value from <code>store</code> and pass it as <code>@Input</code> variable:</p>
  
  <pre><code>this.value$ = this._store$.select(s=&gt;s.value);
  &lt;app-autocomplete [value]="value$ | async"&gt;&lt;/app-autocomplete&gt;
  </code></pre>
  
  <p>The problem that I ran into is:</p>
  
  <ol>
  <li>Component loads and I pass initial <code>value</code> from the <code>store</code>.</li>
  <li>User types something in input text field.</li>
  <li>User stops typing for 350ms (<code>debounce</code> time).</li>
  <li>I <code>emit</code> value to the parent and use an <code>Action</code> + <code>Reducer</code> to keep the value in the store.</li>
  <li>this.value$ <code>Observable</code> reacts on <code>store</code> change and triggers <code>ngOnChange</code> method.</li>
  <li>User continue typing.</li>
  <li>Value from the <code>store</code> overwrites what user has already typed.</li>
  </ol>
  
  <p>For example user typed "stri", then made short pause, then typed "string", but "store" value overwrites his "string" value and he got "stri" value that I put into the "store" before.
  Has anyone come across this before? The only solution we come up with is to check the focus and don't set new value.</p>