Missing Automatic Focus Restoration in Angular CDK Modal Dialogs

Answer the Question First

To restore focus automatically after a CDK dialog closes without duplicating code, wrap the dialog‑open logic in a single, reusable service (or directive). The service records the element that was focused before the dialog opens and restores focus in the dialog’s afterClosed() observable. This eliminates boilerplate in every component and works for both synchronous and asynchronous dialog content.

Likely Explanation

• The CDK focus-trap directive confines focus but does not provide a built‑in restore mechanism.
• Angular Material’s MatDialog exposes an afterClosed() observable, but no restoreFocus flag exists as of Angular 17.
• Creating a singleton service that captures document.activeElement before opening a dialog and restores it afterward is the most maintainable pattern.
• If the dialog content is loaded asynchronously (e.g., via *ngIf or ngTemplateOutlet), the restoration must wait until the dialog’s view is fully rendered to avoid race conditions.
• Future releases may introduce a restoreFocus option in the CDK or Material API; monitoring the Angular GitHub issue tracker is recommended.

Confirmed Facts

• Angular CDK focus‑trap does not automatically return focus to the trigger element.
• Angular Material dialogs expose afterClosed() but lack a native restoreFocus flag.
• A lightweight service that stores the active element and restores it after the dialog closes is a proven pattern.
• The service must check that the trigger element still exists before calling focus() to avoid runtime errors.

Implementation Steps

1. Create a Focus‑Restore Service

   import { Injectable } from '@angular/core';
   import { MatDialog, MatDialogRef } from '@angular/material/dialog';
   
   @Injectable({ providedIn: 'root' })
   export class FocusRestoreService {
     constructor(private dialog: MatDialog) {}
   
     open(component: any, config?: any): MatDialogRef {
       const previous = document.activeElement as HTMLElement | null;
       const dialogRef = this.dialog.open(component, config);
   
       dialogRef.afterClosed().subscribe(() => {
         if (previous && previous.focus) {
           // If the element has been removed, fallback to body
           if (document.contains(previous)) {
             previous.focus();
           } else {
             document.body.focus();
           }
         }
       });
       return dialogRef;
     }
   }
   

2. Use the Service in Components

   import { FocusRestoreService } from './focus-restore.service';
   
   @Component({ /* … */ })
   export class ExampleComponent {
     constructor(private focusService: FocusRestoreService) {}
   
     openDialog() {
       this.focusService.open(ExampleDialogComponent, {
         width: '400px',
         // other MatDialogConfig options
       });
     }
   }
   

3. Optional Directive for Declarative Usage

   @Directive({ selector: '[appFocusRestore]' })
   export class FocusRestoreDirective {
     constructor(private el: ElementRef, private focusService: FocusRestoreService) {}
   
     @HostListener('click')
     onClick() {
       // The directive assumes the element that triggers the dialog
       // is the host element. The dialog should be opened via the
       // FocusRestoreService to keep the logic in one place.
     }
   }
   

4. Verify Focus Restoration
   • Open the dialog via a button, close it with the close button or backdrop click, and inspect document.activeElement in the console.
   • Add console.log('restored', previous); inside the afterClosed subscription to confirm the callback runs.
   • Test with asynchronous dialog content (e.g., *ngIf or ngTemplateOutlet) to ensure focus is restored only after the view is ready.
5. Prepare for Future API Changes
   • Keep an eye on the Angular Material GitHub repository – a restoreFocus flag is discussed but not yet released.
   • When the flag becomes available, replace the custom service with the native option to reduce maintenance overhead.

Missing Diagnostic Detail

If your dialog is opened asynchronously (e.g., the component is loaded via ngIf or ngTemplateOutlet), let us know so we can adjust the timing of the restoration logic accordingly.