prime ng p-calendar getting closed inside p-dialogue when scrolled

I am working on angular and Prime ng library. I have one modal which have calendar inside it. The calendar height is not fitting the modal. So when I scroll the dialogue calendar gets closed automatically. But I want user to scroll and select the month and date. But when I use the same calendar outside the modal it works and don't get close even when I scroll.

Below is stack blitz demo https://stackblitz.com/edit/primeng-calendar-demo-swqhuj?file=src/app/app.component.html

Below is my code.

<p-dialog header="Header" [(visible)]="displayBasic" [style]="{width: '100vw'}" [baseZIndex]="10000">

<div class="p-fluid p-grid p-formgrid">
<div class="p-field p-col-12 p-md-4">
<label for="basic">Basic</label>
<p-calendar inputId="basic" [(ngModel)]="date1"></p-calendar>
</div>
</div>
</p-dialog>


Is there a way to avoid this. Any help will be appreciated.

Continue reading...