(This may have been broken due to changes I made in MDL-83809, so I'll work on a fix soon.)

There are some circumstances where focus lock within a modal does not work after exiting a nested modal.

To reproduce:

1. Go to any Tiny editor - for example, go to any forum and click Add discussion topic.
2. In the editor, click the Image button. The image modal appears.
3. Tab to Browse repositories and press Return. The repositories modal appears.
4. Tab to the X button and press Return to close the repositories modal. Focus returns to the Browse repositories button as expected.
5. Press tab a few times.
   • EXPECTED: Focus should loop around to the start of the modal
   • ACTUAL: Focus moves to the browser UI.

These steps are completely reliable for me but they only fail the first time after you load the page. If you close the Image modal and then repeat the same sequence, everything works as expected.

Cause

The Tab key logic implemented in MDL-83809 is designed to handle the scenario when you already have focused the last focusable element in the document. In that case, the focus would naturally go to the browser UI, so we need to step in to make it wrap around.

The logic fails in this case because the file picker dialog is added to the end of the DOM at the end of the document. When it is closed, the dialog is not removed from the DOM, but only made display: none. This has the effect of making all its inputs non-focusable, but the selectors used to query focusable elements did not take into account the display:none status, so it thinks the last focusable item is one of these hidden inputs, and therefore the tab key logic does not run, and default browser behaviour happens.

(It works the second time because the file picker is not re-added, so the 'insert image' modal gets added after it in the DOM and therefore is still considered the last thing in the document.)