Component: Sidebar. Cannot close sidebar programmatically

[mountpoint]

Describe the bug

In version 17.3.0 when you try to close programmatically by setting [(visible)] --> false sidebar disappears but the mask stays visible. So I downgraded back to 17.2.0

https://stackblitz.com/edit/774ddz-9b8nth

Environment

any

Reproducer

https://stackblitz.com/edit/774ddz-9b8nth

Angular version

17

PrimeNG version

17.3.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://stackblitz.com/edit/774ddz-9b8nth
2. Open sidebar by pressing Show button
3. Close sidebar by pressing Hide button

Current behavior: the mask stays visible

Expected behavior

the mask become invisible

[critchie]

I'm having the exact same issue. This is indeed a new issue with 17.3.0.

[riker09]

Is this related or even the same as #14254 ?

(Because I'm having the same issue when upgrading from Angular 16 to 17 and taking PrimeNG along.)

[mountpoint]

Is this related or even the same as #14254 ?

(Because I'm having the same issue when upgrading from Angular 16 to 17 and taking PrimeNG along.)

I think fix for #14254 created all these problems

[Adrii77]

Same issue here since 17.3.0

[critchie]

This is definitely a different issue. #14254 fixed that issue but appears to have caused this issue.

With this issue when you close the sidebar programmatically the sidebar closes but the

element that blocks the UI remains in the DOM. The user can’t interact with the application because it is blocked.

[dumitru-tabara-dev]

I'm having this issue as well.

[LightBulbIdea]

Can confirm, after upgrading from 17.2 to 17.3 I am seeing this issue with the sidebar component. Will need to downgrade to 17.2 until this gets fixed.

[dumitru-tabara-dev]

@cetincakiroglu , can you take a look at this and let us know when you will be able to fix it? It is a pretty big issue that affects the sidebar usage.
Thank you a lot.

[cetincakiroglu]

Hi,

Thanks a lot for reporting the issue, we're working on it.

[cetincakiroglu]

Hi,

I've fixed it right now, but the problem is you cannot use signal with two way binding yet. Your example will work after the fix but, you shouldn't use [visible]="sidebarVisible()" because visible property is designed with two way binding and you cannot set sidebarVisible after visible changes to false. Best approach would be using a variable instead of signal. [(visible)]="sidebarVisible" will work.

[mountpoint]

Hi,

I've fixed it right now, but the problem is you cannot use signal with two way binding yet. Your example will work after the fix but, you shouldn't use [visible]="sidebarVisible()" because visible property is designed with two way binding and you cannot set sidebarVisible after visible changes to false. Best approach would be using a variable instead of signal. [(visible)]="sidebarVisible" will work.

It doesn't work even without signals, with normal approach

[Adrii77]

Hi,
I've fixed it right now, but the problem is you cannot use signal with two way binding yet. Your example will work after the fix but, you shouldn't use [visible]="sidebarVisible()" because visible property is designed with two way binding and you cannot set sidebarVisible after visible changes to false. Best approach would be using a variable instead of signal. [(visible)]="sidebarVisible" will work.

It doesn't work even without signals, with normal approach

I think cetin means it won't work with signals after his fix

[mountpoint]

Hi,
I've fixed it right now, but the problem is you cannot use signal with two way binding yet. Your example will work after the fix but, you shouldn't use [visible]="sidebarVisible()" because visible property is designed with two way binding and you cannot set sidebarVisible after visible changes to false. Best approach would be using a variable instead of signal. [(visible)]="sidebarVisible" will work.

It doesn't work even without signals, with normal approach

I think cetin means it won't work with signals after his fix ?

I don't know... in my project I use usual approach without signals and in version 17.3.0 it doesn't work

[critchie]

Hi,

I've fixed it right now, but the problem is you cannot use signal with two way binding yet. Your example will work after the fix but, you shouldn't use [visible]="sidebarVisible()" because visible property is designed with two way binding and you cannot set sidebarVisible after visible changes to false. Best approach would be using a variable instead of signal. [(visible)]="sidebarVisible" will work.

This suggestion along with 17.3.1 fixes the issue for me. The sidebar is functioning as expected.

[riker09]

After carefully reviewing all comments here I believe I had a different issue. The modal-backdrop was not closed when clicking a link within the sidebar (and thus navigating to a different page). The links were inside a p-tree component (default Angular routing links).

However, upgrading to v17.3.1 has resolved this and now I can use the default [modal]="true" again.

[mogmura3]

In my case, I was able to close the sidebar by calling detectChanges in the closeCallback method.
Here is the relevant part of my code:

export class SidebarComponent {
	@ViewChild("sidebarRef") sidebarRef!: Sidebar;

	constructor(private readonly cd: ChangeDetectorRef) {}

	closeCallback(e: any): void {
		this.sidebarRef.close(e);
		this.sidebarVisible = false;

		this.cd.detectChanges();
	}

	sidebarVisible = true;
}

By calling this.cd.detectChanges() after setting this.sidebarVisible = false, I was able to successfully close the sidebar. However, I would like to mention that I am not very familiar with Angular and PrimeNG, so there might be a better solution that I am unaware of.

[MacMeissner]

I created a new Angular18 project.
After installation of PrimeNg, PrimeFlex and PrimeIcons i tried to run this.

<p-sidebar [visible]="true" [dismissible]="false" [modal]="true" > 
   Bla
</p-sidebar>

Same Problem. Can not close the Sidebar.

Following these steps:

1. Create a sidebarvisible member in Component-Class.

sidebarVisible = true;

2. Change Binding to Two-Way-Binding

<p-sidebar [(visible)]=sidebarVisible [dismissible]="false" [modal]="true" > 
   Bla
</p-sidebar>

3. Add provideNoopAnimations to app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes), 
    provideClientHydration(),

    // important
    provideNoopAnimations(),
  ]
};

Now it's running.