title: Angular click event not fired when custom input is focused
body: <p>I created simple custom input <code>eu-input</code> element using 'ControlValueAccessor'. Now I have something like that:</p>
  
  <pre><code>  &lt;eu-input&gt;&lt;/eu-input&gt;
    &lt;div *ngFor="let item of items" (click)="choose(item)"&gt;
        &lt;span&gt;{{item.name}}&lt;/span&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>But there is problem I can't figure out. When <code>eu-input</code> is focused, click event doesn't get fired, it's fired only after <code>eu-input</code> is blured (on second attempt).
  so what could be a problem?</p>
  
  <p>this is html: </p>
  
  <pre><code>&lt;input [(ngModel)]="value"/&gt;local: {{val}}
  </code></pre>
  
  <p>and this is ts file:</p>
  
  <pre><code>import { Component, OnInit, forwardRef } from '@angular/core';
  import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
  
  @Component({
    selector: 'eu-input',
    templateUrl: './eu-input.component.html',
    styleUrls: ['./eu-input.component.scss'],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; EuInputComponent),
        multi: true,
      },
    ],
  })
  export class EuInputComponent implements OnInit, ControlValueAccessor {
    constructor() {}
    ngOnInit(): void {}
    onChange: any = () =&gt; {};
    onTouch: any = () =&gt; {};
    val = '';
    set value(val) {
      if (val !== undefined &amp;&amp; this.val !== val) {
        this.val = val;
        this.onChange(val);
        this.onTouch(val);
      }
    }
    writeValue(value: any) {
      this.value = value;
    }
    registerOnChange(fn: any) {
      this.onChange = fn;
    }
    registerOnTouched(fn: any) {
      this.onTouch = fn;
    }
  }
  </code></pre>
  
  <p>choose() method is just console.log('choose clicked') </p>