[dialog]: TinyMCE-React dialogs are not usable from a Reach Dialog.

[PhilMcLachlan]

🐛 Bug report

Current Behavior

This bug occurs when using TinyMCE-react inside a Reach Dialog, and subsequently opening a TinyMCE-react dialog. This can be seen, when using the menu item Insert | Image. The second modal dialog that pops up does not allow you to interact with the textbox controls. However, the buttons work, and the dialog can be dismissed.

Expected behavior

The TinyMCE-react Image dialog modal should allow you to type data into the textboxes. Other TinyMCE-react modals have the same problem.

Reproducible example

https://codesandbox.io/s/infallible-voice-b8zid?file=/src/index.js

Your environment

Software	Name(s)	Version
Reach Package	"@reach/dialog"	0.10.3
React	react	16.8.6
Browser	Chrome	89.0.4389.128
Assistive tech
Node
npm/yarn	yarn	1.22.4
Operating System	MacBook	Catalina

[behzadmehrabi]

Hi, I've been investing it and the problem is focusLock not letting you focus elements inside the second modal.

@chaance do we really need to use react-focus-lock for focus management of modal? cuz we aren't using so many of its features. what do you think about writing a custom focus lock and use that instead? and users can install/use react-focus-lock if they wanted more advanced features.