javascript - PrimeNG confirmation dialog can't be clicked, locks up screen - Stack Overflow

admin管理员组

文章数量:1384497

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: () => thispleteSave()
  });
}

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.

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.pleteSave()
  });
}

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.

• javascript
• css
• angular
• typescript
• primeng

Share Improve this question Follow asked Aug 4, 2018 at 21:11 kshetlinekshetline 13.8k66 gold badges4949 silver badges9191 bronze badges 2

• Try creating an issue at PrimeNG issue tracker and we'll review. – Cagatay Civici Commented Aug 5, 2018 at 19:05
• I'm not sure how to create an issue tracker (is that a Pro support feature?), but I did at least post this same issue in the PrimeNG forum here: forum.primefaces/viewtopic.php?f=35&t=56546 – kshetline Commented Aug 5, 2018 at 21:10

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

I have resolved this issue by adding appendTo="body" to the confirmation dialog as the following :

 <p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" appendTo="body"></p-confirmDialog>

I have faced the same issue. I found the root cause that we have used multiple ConfirmDialog.
Example: Using angular JS
- In file app.ponent.html:

<app-home></app-home>
<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" width="425" global="false"></p-confirmDialog>

- In file home.ponent.html:

<p-confirmDialog header="Confirmation" icon="pi pi-exclamation-triangle" width="425" global="false"></p-confirmDialog>

So if we handle in the ponent file (app.ponent.ts) like this:

 this.confirmationService.confirm({
      header: 'Confirmation',
      message: `Are you sure?`,
      accept: () => {
       // handle except
      },
      reject: () => {
       // handle reject
      }
 });

This piece of code will trigger both ConfirmDialogs above

Solution:

Remove one in two ConfirmDialog. The ConfirmDialog of inside ponent is better. (In my example: The ConfirmDialog of home.ponent.html should be removed.)

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/ponents/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.

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

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

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

This executes right after the this.confirmationService.confirm(... above. It's not a perfect solution because it doesn't put a mask between the bottom dialog and the top dialog, it simply causes both dialogs to be revealed with everything else below the two dialogs masked off.

Much better, however, than locking up the app.

UPDATE: A new solution, based on user860214's answer, as code added at the bottom of my project's app.module.ts file:

// 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);
  }
};

本文标签： javascriptPrimeNG confirmation dialog can39t be clickedlocks up screenStack Overflow