V12 - sidebar doesn't remove mask

[jiangyh1024]

  disableModality() {
        if (this.mask) {
            DomHandler.addClass(this.mask, 'p-component-overlay-leave');
            this.animationEndListener = this.destroyModal.bind(this);
            this.mask.addEventListener('animationend', this.animationEndListener);
        }
    }

    destroyModal() {
        this.unbindMaskClickListener();
        document.body.removeChild(this.mask);

        if (this.blockScroll) {
            DomHandler.removeClass(document.body, 'p-overflow-hidden');
        }

        this.unbindAnimationEndListener();
        this.mask = null;
    }

doesn't trigger destroyModal()

[vimalraj-a]

This is still not fixed. Since mask element is after the sidebar when we set appendTo="body" and the click event on buttons which are placed inside the sidebar components are not preventDefault, then animationend event not triggered. We used custom buttons to close the sidebar.

Its still not working. Easy fix could be add event listener with useCaptue as true

@jiangyh1024 Please reopen this bug

[szymonhel]

Still exists in 12.2.0

[AmazingDreams]

I have looked into this a little. It appears that the animationEndListener that's supposed to destroy the overlay is removed before the panel is entirely hidden. This is done through unbindGlobalListeners

    onAnimationEnd(event) {
        switch (event.toState) {
            case 'void':
                this.hide(); // Binds `destroyModal` to the mask `animationend`
                ZIndexUtils.clear(this.container);
                this.unbindGlobalListeners(); // Removes `destroyModal` from the mask immediately
                break;
        }
    }

A possible solution is to simply move the hide to after the unbindGlobalListeners.

[AmazingDreams]

On second thought, I think unbindAnimationEndListener should be removed from unbindGlobalListeners

[jiangyh1024]

seems fixed, when to release a new version

[KeithGillette]

I am still seeing this issue in our project after updating to 12.2.1. Neither the 2-way binding to [(visible)] nor clicking off the sidebar [dismissible]="true" clears the mask.

[jiangyh1024]

try what I did in #10715, I think it could fix this issue as a makeshift.

[KeithGillette]

Thanks for the suggestion, @jiangyh1024. I have added a ViewChild(Sidebar) and tried to call hide() on it manually prior to setting the [(visible)] binding to false in our component controller per your recommended work-around, but the mask still remains after the sidebar closes.

I do not think that this issue should be closed.

[KeithGillette]

I have been unable to reproduce the problem using the Sidebar Stackblitz example, but this issue still occurs in our PWA under PrimeNG 12.2.1 & Angular 12.2.10. However, I found I could work-around the problem by manually calling destroyModal() onHide:

<p-sidebar
	#NavSideBar
	(onHide)="NavSideBar.destroyModal()"
	[(visible)]="navigationPaneIsOpen"
	[blockScroll]="true"
	[showCloseIcon]="false"
	styleClass="p-0"
	appendTo="body">
		...
</p-sidebar>

[jiangyh1024]

Thx, that would be helpful

[smarrerof]

I can still reproduce the issue in the version 12.2.1. The problem is that the p-component-overlay div is not removed when the sidebar is closed. To reproduce the issue you cannot use a theme because in the theme there are some css transitions to remove the panel. So, my workaround is add the next lines (copied to one theme) to my style.scss file

.p-component-overlay-enter {
  animation: p-component-overlay-enter-animation 150ms forwards;
}

.p-component-overlay-leave {
  animation: p-component-overlay-leave-animation 150ms forwards;
}

@keyframes p-component-overlay-enter-animation {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--maskbg);
  }
}
@keyframes p-component-overlay-leave-animation {
  from {
    background-color: var(--maskbg);
  }
  to {
    background-color: transparent;
  }
}

Anyway I attach a minimal angular project to reproduce the issue

sidebar-issue.zip

[KeithGillette]

Thanks, @smarrerof. Those CSS animations fix the problem and eliminate the need for the work-around I previously posted in our project, which doesn't use a standard PrimeNG theme and was missing those .p-component-overlay-* selectors in our custom theme SCSS.

[kumaheiyama]

Thanks @smarrerof. I can confirm that the problem persists, but this workaround works.

[karlatt]

Many thanks , @smarrerof , your workaround is effective and smart. Issue should be reopened , and maybe fixed with it :)

[ccit-spence]

Why is this closed if it is still broken? I have the problem with 12.2.2

[lufo88ita]

Still present in latest 12.x version. Please fix.

[markusvorraber]

Also still present for me with 12.2.2

[olaisen81]

Confirm, bug is still present in 12.2.2

[akmal2409]

Still present in 13 RC2

[mmulligan5c]

Is this still present in 13.0.2?

[marcovmun]

I can confirm it still present in 13.0.2

[dev-thinks]

issue exists in v13 as well but why this is closed here.

[apunekar]

Issue still exists. Using 13.0.3. But thanks to @KeithGillette work around, else I was dead.

[francowhyline]

Issue still exists, I think that is a problem when I am paying for this project and you people don't event give an answer.
I am using the last version of angular and the last version of primeng and this is not working well. I don't want to use any workaround, this should be fixed by you in the core of the components.

[ddurham2]

happens for me in v13 as well. the issue should not be closed

[QuickScoP3s]

For the people having this issue in V13, check the comment I put on my bug ticket: #11587 (comment)

Make sure to check your theme css file

[Jagan-P]

For the people having this issue in V13, check the comment I put on my bug ticket: #11587 (comment)

Make sure to check your theme css file

@QuickScoP3s the css solution that you gave only changes the background color and does not remove the overlay DOM?

[QuickScoP3s]

For me it does remove the DOM: They use an animation listener on the "p-component-overlay-leave-animation"
Once that animation has finished, it removes the DOM element.

Check this the "disableModality()" function:

primeng/src/app/components/sidebar/sidebar.ts

Line 219 in 5bcc0fb

disableModality() {

[Jagan-P]

Yes. This solves the issue! Thanks!

[karlatt]

For the people having this issue in V13, check the comment I put on my bug ticket: #11587 (comment)

Make sure to check your theme css file

@QuickScoP3s. To be fair and give back to Cesar ... , this comment of yours is just a character for character quote of @smarrerof fix , which you can find at the beginning of this thread ;)

[QuickScoP3s]

Oh woops, totally overlooked that comment. Well, all credits to @smarrerof :P

[flier268]

I found this

<p-sidebar ... [modal]="false">
</p-sidebar>