contentEditable.focus 在 mat 菜单中启用 contenteditable 时需要 setTimeout 才能工作

contentEditable.focus needs setTimeout to work when contenteditable enabled in a mat menu

这是我的 html:

<span #myspan [contenteditable]="editable">
...
<mat-menu #appMenu="matMenu">
  <ng-template matMenuContent>
    <button mat-menu-item (click)="setEditiable()">
      <mat-icon>edit</mat-icon>
      <span i18n>Edit</span>
    </button>
  </ng-template>
</mat-menu>

这是我的 ts:

setEditable(){
 this.editable = true;
 console.log(this.myspan.nativeElement.contentEditable); //false
 this.changeDetector.detectChanges();
 console.log(this.myspan.nativeElement.contentEditable); //true
 this.myspan.nativeElement.focus();
}

此代码不起作用,但是将 focus() 行包装在 setTimeout 中,则可以。此外,如果启用按钮不在 mat-menu 中,它也可以正常工作而无需 setTimeout。

哦,我正在使用 @ng-stack/contenteditable 启用 contenteditable

堆栈闪电战:https://stackblitz.com/edit/angular-ysb2pt

原因是 mat-menu 组件会在菜单关闭后立即将焦点恢复到触发按钮。这意味着您的焦点方法没有效果,因为它会立即被覆盖。

setTimeout 中包装焦点方法解决了问题,因为现在您可以在恢复焦点后调用焦点。

另一个解决方案是说 Angular mat-menu 不通过在触发器上使用 [matMenuTriggerRestoreFocus]="false" 来恢复焦点:

<button mat-icon-button [mat-menu-trigger-for]="appMenu" [matMenuTriggerRestoreFocus]="false"  

Forked Stackblitz