Dialog: Focus trap issue with multiple dialogs

[Vampiro]

Describe the bug

If 2 Dialog components are open at once (one brought up from a button in the first Dialog) and the prop closable={false} is on the nested Dialog, tab button navigation fails to focus on the fields of the nested Dialog, instead preferring fields in the parent Dialog component. Not having prop closable={false} allows tab navigation of the fields in the nested Dialog.

Reproducer

https://codesandbox.io/s/primereact-dialog-tab-issue-9uw81h?file=/src/index.js

PrimeReact version

8.4.0

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 104

Steps to reproduce the behavior

In the provided CodeSandbox:

1. Click the "Show outer dialog" button.
2. Tab navigation is working normally within the outer dialog.
3. Click the "Show inner dialog" button (brings up the nested Dialog with closable={false}).
4. Tab navigation is not working in the inner dialog. Instead, tab is navigating the outer dialog.
5. Click the "Hide inner dialog" button.
6. Click the "Show inner dialog 2" button (brings up the nested Dialog without closable={false}).
7. Tab navigation is working in inner dialog 2.

Expected behavior

Tab navigation should work on nested Dialog components where the prop closable={false} has been passed.

[melloware]

Great test case! Got to the bottom of it.