javascriptcssangulartypescriptprimeng

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:

blocked confirmation dialog

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.

Solution

  • I believe this is a bug in primeng dialog/confirm dialog. Some people suggested to use appendTo = 'body' to fix this however that triggered another bug as the code only append the dialog div to body rather than the whole native element. Here is my work around which seems to work.

    Go to ClientApp/node_modules/primeng/components/confirmdialog/confirmdialog.js

    line 73 change it from: document.body.appendChild(this.container); to: document.body.appendChild(this.el.nativeElement);

    Make sure you use appendTo='body'

    Cheers.