From 5ec34ffa583922d9b4c341baf9dd01d0b2bf5722 Mon Sep 17 00:00:00 2001 From: Karan Mistry Date: Sat, 27 Sep 2025 11:25:18 +0530 Subject: [PATCH] fix(material/expansion): Focus remains on the header when clicked on next or cancel button inside the panel. When we click on next or cancel button the focus remained on the current panel header. This fix uses focus method from the class and changes the `FocusMonitor` to be in `EVENTUAL` Fixes #22942 --- .../expansion/expansion-panel-header.ts | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/material/expansion/expansion-panel-header.ts b/src/material/expansion/expansion-panel-header.ts index a9641381d280..34d39bc09cad 100644 --- a/src/material/expansion/expansion-panel-header.ts +++ b/src/material/expansion/expansion-panel-header.ts @@ -6,7 +6,13 @@ * found in the LICENSE file at https://angular.dev/license */ -import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; +import { + FOCUS_MONITOR_DEFAULT_OPTIONS, + FocusableOption, + FocusMonitor, + FocusMonitorDetectionMode, + FocusOrigin, +} from '@angular/cdk/a11y'; import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes'; import { AfterViewInit, @@ -57,6 +63,15 @@ import {_StructuralStylesLoader} from '../core'; '(click)': '_toggle()', '(keydown)': '_keydown($event)', }, + providers: [ + FocusMonitor, + { + provide: FOCUS_MONITOR_DEFAULT_OPTIONS, + useValue: { + detectionMode: FocusMonitorDetectionMode.EVENTUAL, + }, + }, + ], }) export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption { panel = inject(MatExpansionPanel, {host: true}); @@ -98,9 +113,7 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa ).subscribe(() => this._changeDetectorRef.markForCheck()); // Avoids focus being lost if the panel contained the focused element and was closed. - panel.closed - .pipe(filter(() => panel._containsFocus())) - .subscribe(() => this._focusMonitor.focusVia(this._element, 'program')); + panel.closed.pipe(filter(() => panel._containsFocus())).subscribe(() => this.focus()); if (defaultOptions) { this.expandedHeight = defaultOptions.expandedHeight;