Dialog: Disables tabbbing of inputs

[on2air]

Describe the bug

When using a Dialog it disables the ability to tab between input fields.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-b9vdp1?file=/src/demo.js:714-719

PrimeReact version

8

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome

Steps to reproduce the behavior

See code. If the dialog is not shown, then you can tab between the input fields. Once you show the dialog (by clicking the button) then tabbing is disabled.

I'm using the Dialog in this way as a permanent floating banner in upper right of page, everything is fine except tabbing no longer works on my form.

Expected behavior

Tabbing should work as expected when dialog is visible (same as if its not visible)

[melloware]

This is on purpose. When a Dialog is open its to keep Tabbing containment inside the dialog.

else if (event.key === 'Tab') {
            event.preventDefault();
            const focusableElements = DomHandler.getFocusableElements(dialog);

            if (focusableElements && focusableElements.length > 0) {
                if (!document.activeElement) {
                    focusableElements[0].focus();
                } else {
                    const focusedIndex = focusableElements.indexOf(document.activeElement);

                    if (event.shiftKey) {
                        if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
                        else focusableElements[focusedIndex - 1].focus();
                    } else {
                        if (focusedIndex === -1 || focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
                        else focusableElements[focusedIndex + 1].focus();
                    }
                }
            }
        }

I think a new property to allow Tabbing will be needed to turn this behavior off.

[on2air]

I see. that would make sense. yes a way to disable would be great. in the meantime, I didn't see another component that could be used as sort of a floating message/banner, is there? if not I can look outside of prime.

[melloware]

I don't think there is anything in PR that will do exactly what you want until this issue is fixed.

[on2air]

I was able to use the Toast component for my needs and that allows tabbing.

[melloware]

Going to close this feature as Dialog Accessibility is the goal and keeping the focus in the Dialog is ARIA compliant.