search

focus-trap / focus-trap-react

A React component that traps focus
http://focus-trap.github.io/focus-trap-react/demo/
MIT License
714 stars 64 forks source link

Does it support nested traps? #1

Closed littlebee closed 8 years ago

littlebee commented 8 years ago

I didn't see it in the demo and from looking at the code it looks like there is a single var called trap to track the current trap (https://github.com/davidtheclark/focus-trap/blob/master/index.js)

If not, I can probably add that feature.

Very nicely done.

davidtheclark commented 8 years ago

Can you describe more what you envision? I'm not immediately understanding what behavior you'd like to change.

littlebee commented 8 years ago

I have a main view and I'd like to trap focus on that to prevent tab from tabbing into the page header that I can't add tabindex to all of the a tags of. From that main view I have several dialogs that may have a trap on them.

I try to avoid modal dialogs launched from other modal dialogs, but a frequent need is to display a confirmation dialog / message box on clicking save from a modal. In that scenario it would be preferable to trap focus in the confirmation while it's displayed. And it would be preferable to not close the dialog until confirmation is received, so that when the user clicks cancel from the confirmation, the dialog is still there with all of their inputs.

On Mar 6, 2016, at 7:25 PM, David Clark notifications@github.com wrote:

Can you describe more what you envision? I'm not immediately understanding what behavior you'd like to change.

— Reply to this email directly or view it on GitHub.

davidtheclark commented 8 years ago

Have you tried this out, and it doesn't work? I'm asking because it might. The code for focus-trap that you looked at means that only one focus trap can be active at a time, but you can still create several on a page, and I don't know why they couldn't be nested within each other. That said, if you do try or have tried and it's not working, I agree that this should be possible and we'll have to fix it.

davidtheclark commented 8 years ago

This should work as of v3, because it works for focus-trap v2. Let me know if it doesn't.

theKashey commented 5 years ago

It does not work:

davidtheclark commented 5 years ago

@theKashey It worked as documented, which is as you describe: you were responsible for re-activating traps when you wanted to.

With focus-trap v4 and focus-trap-react v6, though, the libraries are now trying to do what you envision: automatically activating the trap that was previously paused. So maybe that will work for you.