Dialog's focus management and work with 3rd party dialogs

[pawicao]

Provide your feedback here.

I've encountered problems while trying to use tinymce inside Spectrum's Dialog component.

For some background: the tinymce editor allows you to open the source code editor of a rich text, which opens another dialog, in this case on top of the Spectrum Dialog, that the original rich text editor is in. It seems that the textarea that is inside that new dialog cannot be focused on. Some debugging from my side revealed that right after an attempt of focusing on the new dialog on top, Spectrum's Dialog somehow "forces" the focus to get back on itself. That obviously causes issues with the extra dialog's textarea not being editable or focusable.

There doesn't seem to be any exposed property or way to control or disable the focus behavior of the Spectrum's Dialog component. I would like to spark some discussion whether this is something that Spectrum would like to support in the future - to either give users some freedom in how the focus management works, or to find different solutions for handling nested dialogs.

💻 Code Sample

CodeSandbox presenting the issue here

Version

3.29.0

What browsers are you seeing the problem on?

Chrome

If other, please specify

No response

What operating system are you using?

macOS 13.5.2

[LFDanLu]

This is most likely because our Spectrum Dialog contains focus via FocusScope. Typically we'd allow focus to move to a child FocusScope (aka nested Dialogs) but the tinymce editor isn't using a Spectrum overlay and thus doesn't register as a child FocusScope. I'll bring this up with the team for discussion

[LFDanLu]

Apologies, I forgot to update this issue with the results of our discussion. The team discussed a variety of options previously like allowing users to disable focus management and/or allowing people to specify elements to "allow" as valid focusable elements when a FocusScope is active but haven't landed on a solution yet.

[tothandras]

If anyone finds a workaround until this becomes supported, please share it with us. 🙂