Angular 自定义输入聚焦时未触发单击事件

Question

I created simple custom input eu-input element using 'ControlValueAccessor'. Now I have something like that:

  <eu-input></eu-input>
  <div *ngFor="let item of items" (click)="choose(item)">
      <span>{{item.name}}</span>
  </div>

But there is problem I can't figure out. When eu-input is focused, click event doesn't get fired, it's fired only after eu-input is blured (on second attempt). so what could be a problem?

this is html:

<input [(ngModel)]="value"/>local: {{val}}

and this is ts file:

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(() => EuInputComponent),
      multi: true,
    },
  ],
})
export class EuInputComponent implements OnInit, ControlValueAccessor {
  constructor() {}
  ngOnInit(): void {}
  onChange: any = () => {};
  onTouch: any = () => {};
  val = '';
  set value(val) {
    if (val !== undefined && 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;
  }
}

choose() method is just console.log('choose clicked')

Answer 1

Change eu-input component html to

<input [(ngModel)]="value" (focus)="emitFocused(true)" (blur)="emitFocused(false)"/>local: {{val}}

In eu-input TypeScript

@Output() focus = new EventEmitter();
public emitFocused(value) {
   this.focus.emit(value);
}

Can be used like

<eu-input (focus)="myMethod($event)"></eu-input>