adobe / adobe/react-spectrum

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

Open
#5,314 3 comments 1 reaction 0 assignees View on GitHub
Overlays
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide your feedback here.

I've encountered problems while trying to use [tinymce](https://www.npmjs.com/package/@tinymce/tinymce-react) 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](https://codesandbox.io/s/spectrum-dialog-tinymce-example-rlvrgk?file=/src/index.js)

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.