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