angular / angular/components

bug(mat-sidenav): focus trapping is too aggressive under certain conditions

Open
#21,955 1 comment 0 reactions 0 assignees View on GitHub
area: material/sidenav G P2 regression
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

This issue seems to manifest under the following conditions:
- Sidenav is open in `over` or `push` mode (does not happen in `side` mode).
- Backdrop is disabled (this is necessary to be able to click in the content area of a `over` or `push` sidenav.
- App is using the `ConfigurableFocusTrap` (does not happen with the deprecated `FocusTrap`).

Steps to reproduce:
https://stackblitz.com/edit/angular-avy29p?file=src%2Fmain.ts
1. click to focus the "Content" input

#### Expected Behavior

"Content" input remains focused.

#### Actual Behavior

"Drawer" input immediately steals focus.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction at src/main.ts and verify the behavior with an over or push sidenav, disabled backdrop, and ConfigurableFocusTrap. Trace the focus behavior when the Content input is clicked; done means the Content input stays focused instead of the Drawer input taking focus.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.