时间戳

首页 > 解决方案 > Angular：cdk-virtual-scroll + 自动完成 - cdk-overlay-pane 问题

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

问题描述

我正在使用带有 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>

标签： angularangular-materialmat-autocompleteangular-cdk-virtual-scroll

解决方案

我认为这可能是 cdk-overlay-panepointer-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);
}

推荐阅读