1
0
mirror of https://github.com/bitwarden/browser synced 2026-02-12 14:34:02 +00:00

[PM-31937] Close drawer on navigation (#18852)

* Implement OnDestroy lifecycle hook in PoliciesComponent to close dialog on component destruction. Update dialog reference handling for improved resource management.

* Add documentation to dialogs.mdx so others can know how to prevent drawers staying open

* Fix for PR action test

* Update PoliciesComponent to use optional chaining for myDialogRef
This commit is contained in:
Jared
2026-02-11 10:52:50 -05:00
committed by GitHub
parent 29e2be0d2b
commit 3f3fc6f984
2 changed files with 38 additions and 4 deletions

View File

@@ -25,6 +25,35 @@ interruptive if overused.
For non-blocking, supplementary content, open dialogs as a
[Drawer](?path=/story/component-library-dialogs-service--drawer) (requires `bit-layout`).
### Closing Drawers on Navigation
When using drawers, you may want to close them automatically when the user navigates to another page
to prevent the drawer from persisting across route changes. To implement this functionality:
1. Store a reference to the dialog when opening it
2. Implement `OnDestroy` and close the dialog in `ngOnDestroy`
```ts
import { Component, OnDestroy } from "@angular/core";
import { DialogRef } from "@bitwarden/components";
export class MyComponent implements OnDestroy {
private myDialogRef: DialogRef;
ngOnDestroy() {
this.myDialogRef?.close();
}
openDrawer() {
this.myDialogRef = this.dialogService.open(MyDialogComponent, {
// dialog options
});
}
}
```
This ensures drawers are closed when the component is destroyed during navigation.
## Placement
Dialogs should be centered vertically and horizontally on screen. Dialogs height should expand to