react-modal
react-modal copied to clipboard
reactjs
Ability to disable the focus trap
Summary:
It would be great if it was possible to disable the focus trap. This would be useful if ever needing to render the modal inline in a page.
I am building an app which lets one build a modal, and it would be useful to turn off the focus trap while in design mode.
To workaround this for now, I just layered a transparent div over the modal to make it non-interactive.
@chaddjohnson I think setting shouldFocusAfterRender={false} will disable the focus trap. If you want it to still gain focus initially after opening, something like onAfterOpen={() => this.contentRef.focus()} might work.
@JKillian Thank you. I wonder if there also is a way to disable the focus trap to enable interaction with the modal without trapping focus.
@chaddjohnson I believe that shouldFocusAfterRender={false} does disable the focus trap. But not 100% sure, just what glancing at the code looked like to me!
Having the same issue here! Would be really useful if we could! In order to make it flexible for other dialogs types!
I tried shouldFocusAfterRender={false} but doesn't stop the trapping to work. @JKillian
Anyone? :D @chaddjohnson could you explain to me how you have overcome the obstacle? I can't see how having an overlay on top of the modal should stop the JS logic from trapping the user inside?
Thanks!
An overlay on top prevents focus from ever entering the dialogue via click events. Keyboard tabbing into the modal may still cause focus to be trapped...I haven’t tested that.
Unfortunately setting shouldFocusAfterRender={false} does not disable the focus trap.
I've created a PR to address this issue: https://github.com/reactjs/react-modal/pull/876
Sorry for not give attention to this issue...Can anyone explain why would be interest to let the focus scape the modal?
Once a modal is open, no other action can take place...
@diasbruno We have a guide modal in our app. It can be viewed while using the app, but if it receives focus it needs to be closed before the user can transfer focus back to the rest of the app using the tab button. This is a major accessibility concern for us. All the other functionality of react-modal suits the use case very well.