Skip to main content

Search and Top Navigation

#9937 closed bug (patcheswelcome)

Opened March 27, 2014 03:05PM UTC

Closed September 01, 2016 05:41PM UTC

Dialog with iFrame and tab key focus

Reported by: franantares Owned by: franantares
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:

Tab focus goes behind the modal dialog (press TAB key). It should stay in the modal dialog.

Test case:,js,output


Attachments (0)
Change History (4)

Changed March 27, 2014 03:09PM UTC by scottgonzalez comment:1

owner: → franantares
status: newpending

I'm not seeing that behavior. Which browser(s) are you experiencing this in?

Changed March 27, 2014 03:14PM UTC by franantares comment:2

status: pendingnew

Replying to [comment:1 scott.gonzalez]:

I'm not seeing that behavior. Which browser(s) are you experiencing this in?

Sorry, forgot to mention. Chrome.

  • Click "open modal dialog"
  • Set focus with the mouse on "Email" textbox
  • Start tabbing (TAB key)
  • Tab focus will go out of the modal window (pay attention to the "Run with JS" button)


Changed March 28, 2014 12:33PM UTC by tj.vantoll comment:3

It's a bit easier to view outside of the jsBin chrome: It looks we don't allow elements behind the dialog to receive focus, but we do let focus escape to native browser controls.

I'd have to do some digging, but I'm not sure there's a sane way to contain focus within a dialog that contains embedded windows.

Changed September 01, 2016 05:41PM UTC by scottgonzalez comment:4

resolution: → patcheswelcome
status: newclosed

As TJ said, I don't think there's a sane way to handle iframes inside dialogs. As soon as you add a new document inside the dialog, we're entering a completely different flow for the controls. The dialog is no longer managing focus at that point. I'd recommend inlining the content.