Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Question

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Previously functioning code seems to have been affected by an update to PrimeNG. The confirmation dialog that was once usable is now hidden behind a gray click-mask, rendering everything on the screen unclickable:

https://i.sstatic.net/YN7Iu.png

The HTML structure for these two dialogs appears as follows:

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

The code responsible for triggering the confirmation dialog is shown below:

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

Attempts to adjust the z-index of the dialog above the ui-dialog-mask did not yield positive results.

An alternative solution may involve searching the DOM for the problematic ui-dialog-mask, although it would be preferable to find the root cause or a better approach.

javascript css angular typescript primeng

Answer 1

Answer №1

By including appendTo="body" in the confirmation dialog, I successfully resolved this problem. Here is how it looks:

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

Answer 2

By including appendTo="body" in the confirmation dialog, I successfully resolved this problem. Here is how it looks:

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

Answer 3

Answer №2

I experienced a similar issue and was able to identify the underlying cause which involved the use of multiple ConfirmDialog components.
For instance, within an AngularJS context:
- Within the app.component.html file:

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

- Within the home.component.html file:

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

To address this issue in the component file (app.component.ts):

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

This code snippet triggers both ConfirmDialogs mentioned above.

Resolution:

The solution involves removing one of the two ConfirmDialog components. It is recommended to retain the ConfirmDialog within the component itself (e.g., The ConfirmDialog in home.component.html should be eliminated).

Answer 4

I experienced a similar issue and was able to identify the underlying cause which involved the use of multiple ConfirmDialog components.
For instance, within an AngularJS context:
- Within the app.component.html file:

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

- Within the home.component.html file:

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

To address this issue in the component file (app.component.ts):

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

This code snippet triggers both ConfirmDialogs mentioned above.

Resolution:

The solution involves removing one of the two ConfirmDialog components. It is recommended to retain the ConfirmDialog within the component itself (e.g., The ConfirmDialog in home.component.html should be eliminated).

Answer 5

Answer №3

It appears that there is a bug in the primeng dialog/confirm dialog functionality. Some have recommended using appendTo = 'body' to address this issue, but this approach led to another bug where only the dialog div was appended to the body instead of the entire native element. To work around this problem, I made the following adjustment.

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

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

Remember to include appendTo='body'

Cheers.

Answer 6

It appears that there is a bug in the primeng dialog/confirm dialog functionality. Some have recommended using appendTo = 'body' to address this issue, but this approach led to another bug where only the dialog div was appended to the body instead of the entire native element. To work around this problem, I made the following adjustment.

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

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

Remember to include appendTo='body'

Cheers.

Answer 7

Answer №4

In the absence of a more suitable solution, I have settled on the following approach 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 code snippet runs immediately after the

this.confirmationService.confirm(...

statement above. While not perfect, it does reveal both dialogs without masking between them, hiding everything else below the dialogs.

It's a much preferable option compared to causing the app to freeze.

UPDATE: Following user860214's suggestion, I have included the following code at the end 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);
  }
};

Answer 8

In the absence of a more suitable solution, I have settled on the following approach 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 code snippet runs immediately after the

this.confirmationService.confirm(...

statement above. While not perfect, it does reveal both dialogs without masking between them, hiding everything else below the dialogs.

It's a much preferable option compared to causing the app to freeze.

UPDATE: Following user860214's suggestion, I have included the following code at the end 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);
  }
};

Users are reporting a problem with the PrimeNG confirmation dialog where it becomes unresponsive and locks up the screen

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Passing parameters with AngularJS can return as Resteasy @FormParam being null

Utilizing jQuery AJAX to transfer files from the client side in .NET platform

Challenges arise when trying to load CSS on an EJS page in conjunction with using res.redirect()

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

"Exploring the possibilities of RSelenium and Javascript together

Steps for linking a keypress to trigger a specific action

Exploring Discord.js: Sorting a Collection of Retrieved Messages Using .sort()

What is the best way to nest _app.js within several providers?

Angular 2 404 Error persists despite successful retrieval of data from Oracle database using Backend Nodejs URL entered directly into the browser

Electron.js issue: ipcRenderer and ipcMain leading to a white screen problem

The datatable fails to render after executing a function in AngularJS

Express.js post method malfunctioning for BMI calculation

Creating a basic live data visualization chart

Ways to verify the presence of users in the Database

"Encountering a problem with using setState in React Hook useEffect

Creating custom designs for Material UI components

What is the best way to conceal Bootstrap accordion content when first loading my single-page application?

After submitting the form, React checkboxes fail to reset their state

Lines running horizontally on either side of the text

My Vue frontend project is encountering an error during compilation that states "this relative module module was not found."