IE11 Specific Issue- When no results found dropdown is getting extremely long [Height issue]

[vigneshkv23]

Bug description

[Only in IE11] Dropdown height has an issue when no results are found for a scenario.

Scenario

Enter a search string that has a match. Dropdown shown as expected. Now search for not match string. Dropdown is getting excessively long. Please refer screenshot added in the steps to reproduce.

Expected result

No results found

Actual result

Code

 <div class="input-group form-control ng-autocomplete">
 <ng-autocomplete #auto [formControl]="dataControl" [data]="data"
 [searchKeyword]="display" (selected)='selectEvent($event)'
 [itemTemplate]="itemTemplate" (inputCleared)="searchCleared()"
 [notFoundTemplate]="notFoundTemplate" [minQueryLength]=3
 [debounceTime]=5000 [isLoading]="isLoading"
 (inputFocused)='opened()'
 (opened)="opened()"
 (closed)="closed()">
 </ng-autocomplete>
 <ng-template #itemTemplate let-item>
    <a [innerHTML]="item.display"></a>
 </ng-template>
 <ng-template #notFoundTemplate let-notFound>
    <div [innerHTML]="notFound"></div>
 </ng-template>
 <span class="input-group-btn">
 <button disabled class="btn btn-default" type="button"
    aria-label="Search">
 <span class="sr-only">Search</span>
 <i class="jiva jiva-icon-search" aria-hidden="true"
    title="Search"></i>
 </button>
 </span>

.ng-autocomplete {
width: 100%;
margin: 0 auto;
padding: 0px !important;
height: auto;
}

Steps to reproduce

1. Enter a search string that has a match.
2. Dropdown will show as expected.
3. Now search for not match string.
4. Dropdown is getting excessively long.
   

Context

Work Around

1. Manually setting height to "". When on inputFocused callback, opened call back and API response has matched data.
2. Manually setting height to 0px.When on the closed callback and when API response is empty.

opened() {
document.getElementById("suggestions")!.getElementsByTagName("ul")[0].style.setProperty("height", "");
}
closed() {
document.getElementById("suggestions")!.getElementsByTagName("ul")[0].style.setProperty("height", "0px");
}

Your Environment

• Version used: 2.0.8
• Browser Name and version: IE11
• Angular version: 12
• Details: Added polyfills to run in IE11 and "target": "es5"