search

reach / reach-ui

The Accessible Foundation for React Apps and Design Systems
https://reacttraining.com/reach-ui/
MIT License
5.96k stars 563 forks source link

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

Open PhilMcLachlan opened 3 years ago

PhilMcLachlan commented 3 years ago

🐛 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 commented 2 years ago

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.