Skip to content

pFocusTrap doesn't work with Drawer #19005

@bye

Description

@bye

Describe the bug

In previous versions of PrimeNg when using Sidebar component we could apply pFocusTrap directive to it, but it doesn't work with Drawer component. I can see in the DOM that directive itself is working as expected, but the content of the drawer that should be trapped is rendered not in a nested DOM node but on the body level

Image

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/tztfnue8?file=src%2Fapp%2Fdrawer-template-demo.html

Environment

Windows, the issue reproduces both in PrimeNg v19 and PrimeNg v20

Angular version

19.2.15

PrimeNG version

v20

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

  1. Add Drawer component with focusable elements
  2. Use pFocusTrap
  3. Tab through the content of the drawer

Expected behavior

Focus stays trapped inside the drawer when the directive is used

Metadata

Metadata

Labels

LTS-PORTABLEIssue's fix will be ported to supported LTS versionsPRO SupportIssue was reported by PRO UserType: BugIssue contains a bug related to a specific component. Something about the component is not working

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions