angular - 在对话框中使用 mat-expansion-panel 会导致滚动到页面底部

当显示一个包含 a 的对话框（带有 dialog.open）时<mat-expansion-panel>，我发现浏览器会将这个面板滚动到视图中，如果它位于页面底部的话。

在 Chrome 和 IE 中似乎都是一个问题。我试过设置expanded="false"无济于事。

请参阅此 stackblitz 中的示例

在示例中，当您单击“单击”时，页面将滚动到扩展面板（尽管没有打开对话框，我认为这是一个 stackblitz 问题）

EDIT: 似乎<mat-expansion-panel-header>是导致问题的原因。我在页面顶部添加了一个隐藏的 mat-expansion-panel-header 以获取焦点。

标签： angular

这不是错误。这是可以被覆盖的期望行为。该对话框有一个焦点陷阱，可以自动聚焦第一个可聚焦元素。

要覆盖它，您只需添加{ autoFocus: false }到对话框的 open 调用。

dialog.open(MyDialogComponent, { autoFocus: false });