Button click event can not be triggered when it triggered blur event for other element

Question

Updated:

In Angular 10, want to display/hide a button base on a boolean value. Code like below:

<button mat-icon-button *ngIf="isOnFocus">
  <mat-icon (click)="copyContent()">content_copy</mat-icon>
</button>
<div (focusout)="blur($event)" >{{content}}</div>

Before clicking the button, the focus was on div element. The click event on mat-icon can not be triggered when the button displayed.

Answer 1

Try to set the trigger to the button instead of content .

<button mat-icon-button [hidden]="!isOnFocus" (click)="copyContent()">
  <mat-icon>content_copy</mat-icon>
</button>

Answer 2

Event execution order: mousedown -> blur -> mouseup ->click . Changed click to mousedown , and moved the click event to <button> tag as BadPiggie suggested, all works fine.

<button mat-icon-button *ngIf="isOnFocus" (mousedown)="copyContent()">
  <mat-icon >content_copy</mat-icon>
</button>
<div (focusout)="blur($event)" >{{content}}</div>