Angular：cdk-virtual-scroll + 自动完成 - cdk-overlay-pane 问题答案

【问题标题】：Angular: cdk-virtual-scroll + autocomplete - cdk-overlay-pane issueAngular：cdk-virtual-scroll + 自动完成 - cdk-overlay-pane 问题
【发布时间】：2019-12-31 06:58:30
【问题描述】：

我正在使用带有 mat-autocomplete 的 Angular CDK 的覆盖模块。

场景： 有带有 cdk-virtual-scroll 的 mat-autocomplete 输入框，下面有两个按钮。输入框是使用下拉列表中的值之一预先选择的。

问题： 现在，如果我们从 mat-autocomplete 输入中选择整个文本/双击默认选定的文本，然后点击正下方以再次取消选择该文本（在该按钮上/上方），我将无法单击这些按钮。

调试时分析： 如果我们点击输入，它会打开透明的 cdk-overlay 层，但没有结果。作为参考，请参阅附件 img，以了解我已将叠加背景设置为黄色，因为此叠加我们无法单击按钮。

overlay on mat-autocomplete

<span>
    <mat-form-field class="view-field">
      <input matInput #leftInput
        type="text"
        placeholder="Select option"
        [formControl]="viewControl"
        [matAutocomplete]="view"
        (blur)="checkData(true, viewControl.value)"
        (click)="leftInput.select()"/>
    </mat-form-field>
    <mat-autocomplete
      [displayWith]="display()"
      (optionSelected)="checkData(true, $event.option.value)"
      #view="matAutocomplete">
      <cdk-virtual-scroll-viewport class="auto-complete-viewport" itemSize="10" minBufferPx="500" maxBufferPx="750">
        <mat-option
          *cdkVirtualFor="let d of data | async"
          [value]="d"
          title="{{ getNames(backup) }}">
          {{ getNames(backup) }}
        </mat-option>
      </cdk-virtual-scroll-viewport>
    </mat-autocomplete>
  </span>

【问题讨论】：

您能否添加一个可能正在使用 stackblitz 的示例？

标签： angular angular-material mat-autocomplete angular-cdk-virtual-scroll

【解决方案1】：

我认为这可能是 cdk-overlay-pane 将 pointer-events 设置为 auto，并且当窗格在输入焦点上生成时，它甚至在您开始获得结果之前就已经存在。

我有一个解决方案，但是我很想知道您是否找到了更好的方法，因为虽然它有效，但它不是最理想的解决方案。

HTML：

在 HTML 元素的输入元素上使用 (focus)="onFocus"。
在 mat-autocomplete 元素上，使用 (click)="$event.stopPropagation()" 禁用点击。

打字稿：

接下来的函数会找到生成的叠加层并将pointer-events更改为none。

onFocus() {
  setTimeout(() => {
    if (document.getElementsByClassName('cdk-overlay-pane')[0]) {
      const overlay = <HTMLElement>document.getElementsByClassName('cdk-overlay-pane')[0];
      overlay.style.pointerEvents = 'none';
    }
  }, 0);
}

【讨论】：