angular - Angular: cdk-virtual-scroll + autocomplete - cdk-overlay-pane の問題

Question

マットオートコンプリートでAngularのCDKのオーバーレイモジュールを使用しています。

シナリオ: cdk-virtual-scroll を含む mat-autocomplete 入力ボックスがあり、その下に 2 つのボタンがあります。入力ボックスは、ドロップダウンからの値の 1 つで事前に選択されています。

問題: mat-autocomplete 入力からテキスト全体を選択するか、デフォルトで選択されたテキストをダブルタップしてから、そのテキストの真下をもう一度クリックして (そのボタンの上/上で) 選択を解除すると、ボタンをクリックできなくなります。

デバッグ中の分析: 入力をクリックすると、透明な cdk-overlay レイヤーが開きますが、結果はありません。参考までに、添付の画像を参照してください。オーバーレイの背景を黄色に設定したことを理解するために、このオーバーレイのためにボタンをクリックすることはできません。

マットオートコンプリートにオーバーレイ

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