p-dropdown brakes when [options] array length changes Angular Prime NG

p-dropdown brakes when [options] array length changes.

Hi Guys, I have a p-dropdown element in Angular app, which breaks if the length of the array changes.

here is the code:

<p-dropdown
[options]="(ngrxSelector$ | async)!"
[showClear]="true"
[virtualScroll]="true"
[virtualScrollItemSize]="30"

[editable]="true"
optionValue="value"
optionLabel="value"
displayProperty="name"
variant="filled"
appendTo="body"
(onChange)="searchForData($event)"
[editable]="true"
[showClear]="true"
></p-dropdown>




If we perform some change, when we type in the field, we ask the backend for data and update the dropdown options. In this moment, sometimes, the dropdown display brakes, but there are some entries in the array, which should be displayed. See screenshot.

I tried to set min-width and height in the element, but it does not seem to work it looks like the <ul role="listbox"> that contains the options array just changes its position and goes on top. Thanks

Tried all possible predefined prime NG settings. Display should not brake if the options array changes

Continue reading...