Dialogs should trap focus

[pathsny]

Problem description

When a dialog is drawn with multiple elements, keyboard navigation allows the user to switch focus. But when the last element is focused and tab is hit, focus should switch back to the first element.

Steps to reproduce

Create a dialog with a few fields. Use tab to switch focus till the last element. Hit tab once again3

Versions

• Material-UI: 0.15.0
• React: 15.1.0
• Browser: Chrome, 50.0.2661.102

[mbrookes]

Ref #61.

[matthewoates]

Big 👍 to this.

I played around with https://github.com/davidtheclark/focus-trap-react last weekend and it nearly works as a drop-in replacement.

a few caveats:

• only one focus-trap can be active at a time (might need special logic for multiple simultaneous dialogues)
• the library errors if there is not a focusable element
• the auto-focus built into the library (which is slightly redundant given autoFocus functionality, autoFocus and initialFocus focus-trap/focus-trap-react#3) automatically focuses an element via query

[nathanmarks]

@matthewoates I have a dialog ready which solves this issue (and also improves the dialog component structure and API). It is using react-overlays as we're considering some of the features to help improve our overlay/layering system holistically.

I'll be submitting my dialog refactor PR for consideration after I finish working on some style related things -- I thought I would mention in case you wanted to focus your efforts on another area.

@mbrookes we need to setup that roadmap!

Also, this is a dupe of #156

[niquola]

How about autocomplete & focus?

[jingchan]

Was there a regression for this issue? Dialogs do not seem to trap focus for me.

[marie-hughes]

They don't for me either.

[harinair]

They seem to have just closed the issue without fixing it or it might have regressed. It does not work. I opened a new issue #10458.