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

【问题标题】：Using mat-expansion-panel in dialog causes scroll to bottom of page在对话框中使用 mat-expansion-panel 会导致滚动到页面底部
【发布时间】：2020-06-19 21:03:39
【问题描述】：

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

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

请参阅此堆栈闪电战中的示例

https://angular-efsxjw.stackblitz.io

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

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

【问题讨论】：

是的，我也有同样的问题。您是否针对 Angular Material 存储库编写了一个错误？
仅供参考，Stackblitz 出于某种原因不会加载您的示例。
我在 GitHub github.com/angular/components/issues/19630 上打开了 @angular/material 的问题@这是当前的堆栈闪电战：stackblitz.com/edit/angular-ivy-uk31wr

标签： angular

【解决方案1】：

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

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

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

StackBlitz 显示问题和解决方案： https://stackblitz.com/edit/angular-ivy-uk31wr

【讨论】：