p-confirmDialog can't be clicked, locks up screen

[Silent3]

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:

Code: Select all

<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:

Code: Select all

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 confirmation dialog higher than the ui-dialog-mask div that appears, but that didn't help.

For lack of a better answer so far, this is what I'm going with for now:

Code: Select all

  setTimeout(() => {
    const masks = document.getElementsByClassName('ui-dialog-mask');

    if (masks && masks.length > 0)
      (masks[masks.length - 1] as HTMLElement).style.zIndex = 'auto';
  });

Am I doing something wrong? If not, if this is a real PrimeNG bug, is there a better work-around until the bug gets fixed?

[Silent3]

Someone on Stack Overflow came up with a different solution, one that works only when 'appendTo="body"' is used. In the original form, it also involved changing code in the node_modules directory, which is something I wouldn't want to rely on, but here's that change anyway:

node_modules/primeng/components/confirmdialog/confirmdialog.js, changed line 78

Code: Select all

ConfirmDialog.prototype.appendContainer = function() {
  if (this.appendTo) {
    if (this.appendTo === 'body')
      document.body.appendChild(this.el.nativeElement); // Changed from document.body.appendChild(this.container);
    else
      this.domHandler.appendChild(this.container, this.appendTo);
  }
};

My variation on this fix, rather than editing a file in node_modules, was to add the following code to the bottom of my app.module.ts file:

Code: Select all

// TODO: Hack to be removed when bug is fixed in PrimeNG.
import { ConfirmDialog } from 'primeng/confirmdialog';

ConfirmDialog.prototype.appendContainer = function(): void {
  if (this.appendTo) {
    if (this.appendTo === 'body')
      document.body.appendChild(this.el.nativeElement);
    else
      this.domHandler.appendChild(this.container, this.appendTo);
  }
};

Without this fix using 'appendTo="body"' not only left the confirmation dialog unclickable, it wasn't centered either.

[cagatay.civici]

Is there stackblitz template we can see this issue, does it happen with 6.1.2 as well?

[ASK83]

Thanks @Silent3 for your hack that works for me.
And I have updated to 6.1.2 and the problem still exists and above hack solved the issue, until PrimeNG team fix it in their code.

[mthor1979]

all you need is to add appendTo="body" . add that to the dialog and to the confirm