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

Question

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

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

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

调试时分析：如果我们点击输入，它会打开透明的 cdk-overlay 层，但没有结果。 参考见附件img，为了理解我已经将覆盖背景设置为黄色，因为这个覆盖我们不能点击按钮。

覆盖垫自动完成

<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>

Answer 1

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

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

HTML：

• 在 HTML 元素中的 input 元素上使用(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);
}