Primeng: Overlay show/hide with ngIf throws exception

Created on 29 Jul 2018  路  4Comments  路  Source: primefaces/primeng

I'm submitting a

[x] bug report

Current behavior
After updating from 6.0.1 to 6.0.2, toggling the display of a div containing a p-overlayPanel without triggering the display of the overlay will result in the following error:

AppComponent.html:5 ERROR TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at OverlayPanel.push../node_modules/primeng/components/overlaypanel/overlaypanel.js.OverlayPanel.restoreAppend (overlaypanel.js:74)
    at OverlayPanel.push../node_modules/primeng/components/overlaypanel/overlaypanel.js.OverlayPanel.ngOnDestroy (overlaypanel.js:124)
    at callProviderLifecycles (core.js:9574)
    at callElementProvidersLifecycles (core.js:9542)
    at callLifecycleHooksChildrenFirst (core.js:9532)
    at destroyView (core.js:10594)
    at callWithDebugContext (core.js:11352)
    at Object.debugDestroyView [as destroyView] (core.js:11036)
    at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.clear (core.js:8750)
    at NgIf.push../node_modules/@angular/common/fesm5/common.js.NgIf._updateView (common.js:3358)

If I remove appendTo="body", there aren't any error anymore.

Expected behavior
6.0.1 toggles the display without any issue.

Minimal reproduction of the problem with instructions
The following template will crash on toggle:

@Component({
  selector: 'app-root',
  template: `
    <p-toggleButton onLabel="on" offLabel="off" [(ngModel)]="display"></p-toggleButton>
    <div *ngIf="display">
      <button class="ui-button-secondary align-self-center" type="button" pButton label="Options" (click)="overlay.toggle($event)"></button>
      <p-overlayPanel appendTo="body" #overlay>
        <div>
          Hello world
        </div>
      </p-overlayPanel>
    </div>
  `
})
export class AppComponent {
  display = false;
}
  1. Click on off toggle
  2. Click on on toggle (do not click on Options)
  3. Look at Chrome console
  • Angular version: 6.1.0

  • PrimeNG version: 6.0.2

  • Browser: Chrome

Most helpful comment

Adding && this.container to the line 73 of overlaypanel.js seem to fix the problem.

All 4 comments

Fyi, same error is happening with confirm dialog.

Adding && this.container to the line 73 of overlaypanel.js seem to fix the problem.

Heads up, looks like a duplicate ticket was resolved for this issue: #6168

Fixed in 6.1.0-RC1 already, yes.

Was this page helpful?
0 / 5 - 0 ratings