Component: Sidebar

[Sp94dev]

Describe the bug

When trying to close the sidebar, the sidebar-mask disappears but the component stays open.
(onHide) is not triggered.

Environment

Standard angular application

Reproducer

https://stackblitz.com/edit/774ddz?file=src%2Fapp%2Fdemo%2Fsidebar-basic-demo.html

Angular version

17.1.0

PrimeNG version

17.0.0-rc.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.17.0.

Browser(s)

Chrome

Steps to reproduce the behavior

1. Open sidebar
2. Close sidebar

Expected behavior

(onHide) should call closeSidebar method

[eXpertise7]

@Sp94dev unfortunately you are right... just when I thought [email protected] (last version of angular 16, equal as yours) is production ready after months of waiting..

This issue occurs only is p-sidebar has default or implicitly set [modal]="true", on [modal]="false" everything works normally.

What is interesting, sometimes (onHide) EventEmitter from p-sidebar works, but after couple of times it stops to destroy p-sidebar HTML content.

Thank you for testing this (from another FE Developer user of PrimeNG).

[eXpertise7]

My experience is that I can tell that when [(visible)] ngModel variable if p-sidebar has two race conditions (two booleans), on manipulating these booleans at User Developer codebase - PrimeNG will set one p-sidebar EventEmitter (onHide) correctly, but it will not set second p-sidebar (destroy a component there) in the same view.

Splitting these two race conditions from one p-sidebar, into two separate p-sidebar's at my side did the trick (no issues anymore), but issue is persistent still with p-sidebar in mentioned case.

I hope that'll help some of users to temporarily fix that issue at your codebase, and that PrimeNG team will find what's the issue and solve it quick.

[Sp94dev]

@eXpertise7 could You show an example?

[eXpertise7]

@eXpertise7 could You show an example?

I've different case, I'm using normal public boolean variables, not Signal's.

Before it was this, it has worked in the [email protected] (my version):

<p-sidebar
  position="right"
  [(visible)]="showFirstSidebarContent || showSecondSidebarContent"
  (onHide)="closeSidebar()">
    <app-first-component *ngIf="showFirstSidebarContent"></app-first-component>
    <app-second-component *ngIf="showSecondSidebarContent"></app-second-component>
</p-sidebar>

  closeSidebar(): void {
    // apply sidebar flags because we have 2 conditions in 2 way databinding visible prop
    // usually we don't need this approach
    this.showFirstSidebarContent = false;
    this.showSecondSidebarContent = false;
  }

On [email protected] it does not work.

So I needed to split (without using (onHide) event method) one p-sidebar into two p-sidebar's usage:

<p-sidebar
  position="right"
  [(visible)]="showFirstSidebarContent"
>
  <app-first-component *ngIf="showFirstSidebarContent"></<app-first-component>
</p-sidebar>

<p-sidebar
  position="right"
  [(visible)]="showSecondSidebarContent"
>
  <app-second-component *ngIf="showSecondSidebarContent"></app-admin-group-guide>
</p-sidebar>

This is not issue solve of p-sidebar unappropriate (onHide) event usage, this could be just for some people temporarily workaround.

[Sp94dev]

Ahh yes, In my case setting [modal]=false helps a little but it is not a solution because I lost overlay and a click outside of sidebar behaviours.

[gabboman]

In my case it worked fine with primeng16 in general, but when updated to angular 17 started getting this issue too. Temporaly I will set modal to false

[Sp94dev]

After some testing, I noted that the bug started occurring in 16.8.0, and in 16.5.0 everything worked fine.

[gabboman]

Issue still happens at 17.1.0

[mountpoint]

@cetincakiroglu

in version 17.3.0 when you try to close programatically by setting [(visible)]="isVisible" sidebar disappears but the mask stays visible. So I downgraded back to 17.2.0

[cetincakiroglu]

@cetincakiroglu

in version 17.3.0 when you try to close programatically by setting [(visible)]="isVisible" sidebar disappears but the mask stays visible. So I downgraded back to 17.2.0

could you please create a separate issue with a stackblitz reproducer for this?

[riker09]

Maybe this is helpful. I have a p-menu component inside the p-sidebar and when I click on one of the menu items the p-sidebar is closed and if I immediately spam-click on the p-overlay it gets closed sometimes? It reliably works with one specific link in my menu while others don't.

[Melliche]

Hello, the problem is still present with the latest versions of Angular 17, if I modify the value of visible, the onHide event is not triggered, I use these dependencies:

"dependencies": {
    "@angular/animations": "^17.3.11",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "^17.3.11",
    "@angular/compiler": "^17.3.11",
    "@angular/core": "^17.3.11",
    "@angular/forms": "^17.3.11",
    "@angular/platform-browser": "^17.3.11",
    "@angular/platform-browser-dynamic": "^17.3.11",
    "@angular/router": "^17.3.11",
    "@jsverse/transloco": "^7.4.2",
    "angular-oauth2-oidc": "13.0.1",
    "dayjs": "^1.11.11",
    "lodash": "^4.17.21",
    "primeflex": "^3.3.1",
    "primeicons": "^6.0.1",
    "primeng": "^17.18.1",
    "rxjs": "~7.8.1",
    "tslib": "^2.6.2",
    "uuid": "^9.0.0",
    "zone.js": "~0.14.7"
  },