Angular Material 打开后的自动完成控件不会因页面级滚动等外部操作而关闭

Question

如图stackblitz, I'm facing an issue with Angular Material Autocomplete control in which the control stays opened on external events like Page Scroll as shown in the attached sample and the issues even occurs in the Angular Material demo site.

重现步骤：

单击自动完成控件并使其保持展开状态。
尝试将页面级别滚动到底部 (https://v7.material.angular.io/components/autocomplete/examples), 自动完成控件没有 collapse/close.
我试过像示例中那样放置 focusout 事件 (https://stackblitz.com/edit/angular-jfuvpb?file=app%2Fautocomplete-overview-example.html), 即使自动完成控件在页面级滚动时折叠点击 (https://stackblitz.com/edit/angular-jfuvpb?file=app%2Fautocomplete-overview-example.ts) 但是出现了更多问题，例如所选选项不适用于自动完成控件。

预期行为：在自动完成控件之外的任何操作，例如，页面级别滚动应该关闭自动完成控件

实际行为：自动完成控件保持展开状态并且不是用户友好的行为。

Answer 1

是well-knowissue in github

解决方法是将 cdkScrollable 放在具有滚动功能的包装器上并覆盖 MAT_AUTOCOMPLETE_SCROLL_STRATEGY 提供程序。

html

<div class="content-container" cdkScrollable>

确保您导入了 import {ScrollingModule} from '@angular/cdk/scrolling';

Note: you don't need to put cdkScrollable if it is a body scroll

app.module.ts

import { Overlay, CloseScrollStrategy } from '@angular/cdk/overlay';

export function scrollFactory(overlay: Overlay): () => CloseScrollStrategy {
    return () => overlay.scrollStrategies.close();
}

@NgModule({
  ...
  providers: [
    { provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
  ]
})
export class AppModule {}

Forked Stackblitz

Angular Material 打开后的自动完成控件不会因页面级滚动等外部操作而关闭

Angular Material Autocomplete control once Opened is not getting closed for external actions like Page level scroll

autocomplete

angular-material

angular-material2

angular

angular-material-7