Angular7和NgbModal：如何删除默认自动对焦

我们刚刚将应用程序升级到angular 7，我们注意到所有ngBootstrap模式现在都有一个默认的关闭按钮自动对焦，如下图所示

这是我的密码：

html模式代码：

<form [formGroup]="storeForm" novalidate>
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title">Modal Test</h4>
            <button type="button" class="close" aria-label="Close" 
               (click)="activeModal.dismiss('Cross click')">
               <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <h4>Todo</h4>
        </div>
        <div class="modal-footer">
            <button role="button" type="submit" class="btn btn-primary" 
               (click)="activeModal.close('Finish click')" prevent-double- 
               submit>{{ 'store.add.finish' | translate }}</button>
       </div>
    </div>
</form>

我的问题是如何删除不符合预期行为的默认自动对焦

---

感谢阅读，请原谅拼写错误。

出于可访问性和键盘导航的原因，焦点需要在模态中。默认情况下，焦点位于模态中的第一个可聚焦元素上，在您的情况下，它是关闭按钮。您可以将

ngbAutofocus

属性添加到希望焦点所在的元素中

Ok

---

您可以在

上阅读更多内容，这是一个难看的破解，但您可以添加一个不可见元素作为第一个元素：

<input type="text" style="display:none" />

---

如果您不介意关闭按钮实际聚焦，但想去除难看的轮廓，可以使用

轮廓：无

template.html

：

<button type="button" aria-label="Close">Close</button>

将

style=“outline:

none；”添加到关闭按钮

例如：

<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> 
<span aria-hidden="true">&times;</span>
</button>

&时代；

我就是这么做的，只是检查我是否能恢复以前的行为。但这似乎是不可能的。谢谢你的时间。请考虑添加一些让你的代码有点上下文的散文。我想你会发现，遇到这个问题的其他人会受益更多。按钮[aria label=“Close”]：焦点{outline:none；}对这个问题进行了讨论：但是，似乎没有结果。因此，雇佣大纲似乎是目前为止最好的解决方案。

<button type="button" aria-label="Close">Close</button>

button[aria-label="Close"]:focus {
  outline: none;
}

<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')"> 
<span aria-hidden="true">&times;</span>
</button>