Angular: cdk-virtual-scroll + autocomplete - cdk-overlay-pane issue

Question

I'm using Overlay Module of Angular's CDK with mat-autocomplete.

Scenario: There is mat-autocomplete input box with cdk-virtual-scroll and below that there are two buttons. Inputbox is preselected with one of the value from dropdown.

Issue: Now if we select whole text/double tap on default selected text from mat-autocomplete input, and then click exactly below to unselext that text again (on/above that buttons), I'm not able to click the buttons.

Analysis while Debugging: If we click on input it open up the transparent cdk-overlay layer, without results. For reference see the attached img, for understanding I had set overlay background as yellow, because of this overlay we can not click the buttons.

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>

Answer 1

I think this may be the cdk-overlay-pane having pointer-events set to auto , and as the pane generates on input focus it is there even before you start getting results.

I have a solution, however I'd be interested to know if you found a better way of doing this as, although it works, it's not the most desirable solution.

HTML:

• On the input element in your HTML element use (focus)="onFocus" .
• On the mat-autocomplete element, use (click)="$event.stopPropagation()" to disable clicking through.

TypeScript:

• The following function will then find generated overlay and change the pointer-events to be none .

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