ConfirmPopup issue with focusTrap

[Kwaadpepper]

Describe the bug

Cannot focus the confirm modal with TAB, when combining with focustrap.

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/efphaqph?file=src%2Fapp%2Fconfirm-popup-basic-demo.html

Environment

Using Firefox Developper version latest, tried with Chrome, Chromium

Angular version

21

PrimeNG version

v20

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

1. Open the stack blitz
2. Click on Toggle Focus trap so it is enabled
3. Use TAB to navigate on Save button and press space
4. Use TAB to navigate on modal -> you cant
5. Now disable focus trap
6. Use MAJ+TAB to navigate on Save button and press space
7. Use TAB to navigate into the modal -> you can and will be trapped in the modal

Expected behavior

I expected the modal to be injected nearby (just after) the target, so it would behave as normal and I could navigate into the modal while staying in my Focus trap jail.

[Kwaadpepper]

I just saw #19005 that may solve this issue. I'll check that.

Looking at the PR related, this is not a fix for this issue.

[Kwaadpepper]

Please also not that https://primeng.org/confirmpopup#headless, the headless confirm popup is not focusable using tab whereas https://primeng.org/confirmpopup#headless is focus trapped.

The means we cannot jump in the popup.

[mehmetcetin01140]

Hi, please take a look at the StackBlitz example: https://stackblitz.com/edit/efphaqph-q8qel4w1?file=src%2Fapp%2Fconfirm-popup-basic-demo.html

[Kwaadpepper]

@mehmetcetin01140

TLDR:

Using [autofocus]="true" how you did produce the expected behavior, however I did not expect to need that since the target is set to target: event.currentTarget as EventTarget, I expected the popup to behave like it was inside the focusTrap.

---

I noticed there is an added [autofocus]="true" on the save Btn. The behavior is exactly as expected, tested on chromium and FF with this tag.

Without, it :

• focustrapDisabled you can navigate using tab into the Confirm popup after the Toggle focus trap.
• focustrapEnabled you can only navigate between Save and Toggle focus trap.
  This is logic, since the popup is injected outside the focus trap Dom Child Node. However, the issue stand here.