Angular Material - 自动完成组件下拉部分不粘在输入字段上

Question

来自 angular-material 的自动完成组件在 MatDialog 组件内未按预期工作。自动完成组件的 drpodown 部分不粘在输入字段上。

stackblitz 链接 - example

重现 - 转到上面的 stackblitz。单击“打开弹出窗口”按钮。单击“选择一个”自动完成字段。选项将作为下拉菜单打开。然后滚动弹出的bodu。请注意，自动完成组件的下拉部分不会粘在输入字段上。我该如何解决这个问题？

Answer 1

这是因为下拉菜单实际上是 cdk-overlay-container 的一部分，而不是 matAutocomplete 的一部分...仅由 matAutocomplete 触发 将在 cdk-overlay-container 中呈现，并根据 matAutocomplete input 字段的位置计算出 top 位置在用户与字段交互时。

Important Note: The CDK container is transparant and the full height and width of the root browser view port, overlaying everything in your app.

如果您要将 matAutocomplete 放在对话框中间，打开，然后关闭...稍微滚动一下位置，再次打开 matAutocomplete...您会注意到它使用新计算的 top 而不是旧的....

在新位置呈现

一旦它通过 cdk-overlay-container 呈现在 DOM 上，但是，没有实时滚动事件来强制 cdk-overlay-container使用滚动事件“重新计算”顶部位置。

I think the idea is that users who are interacting with an autocomplete typically are not scrolling around while doing so... as they are actively searching for a value... once selected... they then proceed with UI navigation.

如果您注意到，一旦您在同一个对话框中与 mat-select 进行交互，当它打开时您将无法滚动……我认为他们这样做是出于这个特定原因因为它也使用 cdk-overlay-container 来呈现下拉菜单...我不太清楚为什么 matAutocomplete 的行为不一样。

---

如果你把它放在你的组件 css 中，然后打开你的对话框，你可以看到对话框和下拉菜单是这个“隐藏”容器的一部分......甚至打开对话框之前的自动完成也会暴露这个容器，你可以看到下拉菜单不是红色的...但它下面的所有内容都是红色的。

::ng-deep .cdk-overlay-container{
  background-color: #ff000087;
}

此处提供有关 CDK 的其他信息。

https://material.angular.io/cdk/overlay/overview