PrimeNG – Bug in Version 12 lässt die Sidebar nicht korrekt schließen

PrimeNG ist eine sehr umfangreiche Component Library für Angular. In Version 12 hat sich jedoch ein Fehler eingeschlichen. Wir zeigen einen Workaround.

Der Fehler tritt dann auf, wenn man die Sichtbarkeit einer Sidebar über eine Visibility-Variable steuert.

<p-sidebar [(visible)]="isOpenEditDlg" [fullScreen]="true" [baseZIndex]="10000" blockScroll="true" [showCloseIcon]="false">
  <app-edit [(visible)]="isOpenEditDlg"></app-edit>
</p-sidebar>

Beim Schließen bleibt dann ein halb-transparenter DIV mit der Klasse p-sidebar-mask weiter aktiv, der alle darunter liegenden Elemente überlagert und unklickbar macht.

Hier noch mal etwas größer:

Erstmals trat der Fehler in Version 12.2.0 auf und ist als Issue hier und hier bereits erfasst.
In Version 12.2.2 tritt er immer noch auf. Glücklicherweise hat der User smarrerof einen Workaround gefunden, der ganz leicht per Stylesheet wirksam wird. Danke dafür.

.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;
  }
}

Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.

---

Quellen:

• Offizielle Seite
• PrimeNG bei GitHub
• Workaround