[Modal] focus-trap fails when a focused element in the modal unmounts

[vinoron]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

The dialog should close after pressing ESC

Current Behavior 😯

The dialog is not closed

Steps to Reproduce 🕹

Link:
https://codesandbox.io/s/material-ui-dialog-close-by-esc-3ixsz

1. Click "OPEN DIALOG"
2. Click "CLICK ME"
3. Press Esc to close

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.2.0
React	v16.8.6
Browser	Chrome Version 75.0.3770.100 (Official Build) (64-bit)

There is only in Chrome, Safari and Firefox everything is fine

[eps1lon]

I'd say the actual issue is that focus isn't trapped inside the dialog. Intuitively we could return focus from document.body to the focus trap to catch this specific issue. We "just" need to research event order and transition of document.activeElement. Something like "if any blur event is fired return to focus to focusTrap if the next active element is outside"

[oliviertassinari]

The focus moves back to the body, we don't detect it.

@eps1lon Something like (crappy fix)?

diff --git a/packages/material-ui/src/Modal/TrapFocus.js b/packages/material-ui/src/Modal/TrapFocus.js
index 29c65c566..4ba5a74c0 100644
--- a/packages/material-ui/src/Modal/TrapFocus.js
+++ b/packages/material-ui/src/Modal/TrapFocus.js
@@ -98,6 +98,11 @@ function TrapFocus(props) {
     };

     doc.addEventListener('focus', contain, true);
+    doc.addEventListener('blur', () => {
+      setTimeout(() => {
+        contain();
+      })
+    }, true);
     doc.addEventListener('keydown', loopFocus, true);

     return () => {

[eps1lon]

I had something else in mind: #16585

Not sure if blur is even fired cross browser when the active element is removed.

[oliviertassinari]

Oh yeah, I was showing a dirty fix, I'm sure we can find something better :). Alternatively, we could wait for React to release their focus scope component. I would hope they handle the problem.

[eps1lon]

Alternatively, we could wait for React to release their focus scope component.

This might be the best idea. Though I was hoping we could get rid of some code while fixing it.

[neemah]

We would appreciate fix of this if it's possible, because it's quite common scenario - user opens Dialog, submit some data and then dialog is not closed with ESC key :(