Primeng: p-dialog tabbing problem: focus always in the first elemets if two dialogs are opened

[kravda]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior
show p-dialog B with [focusTrap]="true" over another p-dialog A with [focusTrap]="true", all focusable elements have different tabIndexes
press Tab batton in dialog B -> focus doesn't go to second element in dialog B but to the fiers element

Expected behavior
focus has to go to second element in dialog B

Minimal reproduction of the problem with instructions
Precondition: We have 2 opened visible dialogs: A was opened first and then open dialog B from dialog A.
Important: dialog B not inside of dialog A, in html it should be <p-dialog A>...</p-dialog><p-dialog B>...</p-dialog>
Behaviour: After pressing Tab button in dialog B onKeydown's listener is executed from dialog A first.
Listaner A can't find document.activeElement in focusableElements (line 441) because now activeElement in dialog B and sets focus in his first element focusableElements[0].focus() (line 451).
Then onKeydown's listener is executed from dialog B and the same: can't find activeElement in focusableElements because it was moved to dialog A and sets focus to his first element.
As result doesn't matter how many time you press Tab button - focus always in first element of the last opened dialog.

• Angular version: 7.2.15
  

• PrimeNG version: 7.1.3

• Browser: [Chrome 73 | Firefox 67]

• Language: [TypeScript 3.2.4]

• Node (for AoT issues): node --version = v10.15.3

[gwoplock]

demo of issue: https://stackblitz.com/edit/primeng-dialog-captive-tab-2-model

[desenvflk3]

I´m having the exaclty same issue in my project, did you fixed it?
I´m trying to solve it for the last 5 days.

[gwoplock]

I had to turn off the focus trap. I haven't found a way to fix this issue. Maybe bind to the focus trap enabled flag and use it to toggle between the dialog?

[desenvflk3]

I´ve Already tried it, didnt work as expected and I still have no clue what to do haha.

[FernandaGM]

I'm having the same issue. Any updates on a possible fix?

[tommancini]

I am also having this problem. It seems like Shift+Tab works fine and puts focus in my input fields in reverse order, but tab always puts focus on the first button on the second dialog. @cagataycivici

[Hawkinks]

Same thing here. Still no fix?

[KurtBrowder]

I ended up having to use the FocusTrap directive on the content inside the dialog instead of the dialog property. If you're using version 8 check that out.

[Hawkinks]

Solved by disabling [focusTrap] on the primary dialog.
Thanks to you @bootstrapsbootstraps i figure that out! 😄

[LucasAMello]

Tab still not working when two dialogs are open... On the second dialog it get stucks on the "close" button.

[zivlevy]

same problem - any fix ?

[wiscomsolutions]

any solution for this yet?