Skip to content

Commit 9a673b5

Browse files
committed
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
1 parent ef62d5c commit 9a673b5

File tree

1 file changed

+17
-4
lines changed

1 file changed

+17
-4
lines changed

src/material/expansion/expansion-panel-header.ts

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {FocusableOption, FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
9+
import {
10+
FOCUS_MONITOR_DEFAULT_OPTIONS,
11+
FocusableOption,
12+
FocusMonitor,
13+
FocusMonitorDetectionMode,
14+
FocusOrigin,
15+
} from '@angular/cdk/a11y';
1016
import {ENTER, hasModifierKey, SPACE} from '@angular/cdk/keycodes';
1117
import {
1218
AfterViewInit,
@@ -57,6 +63,15 @@ import {_StructuralStylesLoader} from '@angular/material/core';
5763
'(click)': '_toggle()',
5864
'(keydown)': '_keydown($event)',
5965
},
66+
providers: [
67+
FocusMonitor,
68+
{
69+
provide: FOCUS_MONITOR_DEFAULT_OPTIONS,
70+
useValue: {
71+
detectionMode: FocusMonitorDetectionMode.EVENTUAL,
72+
},
73+
},
74+
],
6075
})
6176
export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, FocusableOption {
6277
panel = inject(MatExpansionPanel, {host: true});
@@ -98,9 +113,7 @@ export class MatExpansionPanelHeader implements AfterViewInit, OnDestroy, Focusa
98113
).subscribe(() => this._changeDetectorRef.markForCheck());
99114

100115
// Avoids focus being lost if the panel contained the focused element and was closed.
101-
panel.closed
102-
.pipe(filter(() => panel._containsFocus()))
103-
.subscribe(() => this._focusMonitor.focusVia(this._element, 'program'));
116+
panel.closed.pipe(filter(() => panel._containsFocus())).subscribe(() => this.focus());
104117

105118
if (defaultOptions) {
106119
this.expandedHeight = defaultOptions.expandedHeight;

0 commit comments

Comments
 (0)