PrimeNG confirmation dialog can't be clicked, locks up screen

This code used to work at one time, so I think I've been snagged by an update to PrimeNG which has broken something for me. What was once a useable confirmation dialog is now hidden behind a gray click-mask which makes everything on the screen unclickable:



The HTML for these two dialogs looks like this:

<p-dialog header="Save Location" [modal]="true" [(visible)]="showSaveDialog" width="350" height="190">
<div style="height: 60px;">
Save location as:&nbsp;
<ks-dropdown #saveNameDropdown [(ngModel)]="selectedName" [options]="saveDialogNames" [editable]="true" [style]="{width: '200px'}"></ks-dropdown>
<br><br><p-checkbox [(ngModel)]="makeDefault" binary="true" label="Make this the default location"></p-checkbox>
</div>
<p-footer>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<button type="button" pButton icon="far fa-window-close" (click)="showSaveDialog=false" label="Cancel"></button>
<button type="button" pButton icon="fas fa-check" (click)="doSave()" label="OK" [disabled]="!selectedName.trim()"></button>
</div>
</p-footer>
<p-confirmDialog header="Same location name in use" icon="fas fa-question-circle" width="400"></p-confirmDialog>
</p-dialog>


And the code that launches the confirmation dialog looks like this:

if (_.find(this.app.locations, {name: this.selectedName })) {
this.confirmationService.confirm({
message: `Are you sure you want to replace the existing "${this.selectedName}"?`,
accept: () => this.completeSave()
});
}


I tried to set the z-index of the dialog higher than the ui-dialog-mask div that appears, but that didn't help.

I might be able to hack out some fix by searching the DOM for the offending ui-dialog-mask, but I'd rather not do that if someone else can see what I might be doing wrong, or has a better solution.

Continue reading...