jQuery UI modal dialog focus bug?
I am trying to create a modal dialog box that has a vertical scroll for content that overflows. For demo purposes, this dialog box contains an anchor and a bunch of divs (to overflow). Here is my code:
The HTML
- <body>
- <div id="dialog">
- <a href="javascript:void(null);">blah blah blah</a>
- <div>some content to make the dialog scroll appear</div>
- <div>some content to make the dialog scroll appear</div>
- <div>some content to make the dialog scroll appear</div>
- <div>some content to make the dialog scroll appear</div>
- <div>some content to make the dialog scroll appear</div>
- <div>some content to make the dialog scroll appear</div>
- </div>
- </body>
The jQuery
- $(document).ready(function () {
- $('#dialog').dialog({
- position: 'center',
- height: 300,
- width: 200,
- modal: true
- });
- });
The Demo: JS Bin
To reproduce the issue:
1. Scroll down to the bottom of the dialog box
2. Lose focus on the actual browser window (go to another window, click the desktop, etc.)
3. Hover over the dialog box in the unfocused browser window
4. Click in the dialog box (or just minimize/maximize your browser window)
The result should be the dialog box scrolling back to the topmost anchor tag ("blah blah blah"). (This may require several attempts to lose focus/click in the dialog box) The JS Bin code is using jQuery UI 1.10.2, but it happens in .3 as well.
I believe my issue may be similar to this SO question, but it's a little different because I'm using anchor tags... however, the line hasFocus.eq(0).focus(); is the culprit. When that part executes for me, it has my anchor tag as the first element in the hasFocus array.
Now, the interesting part is once you take away modal: true, the issue is no longer there... so I'm not really sure if this is a bug or if it's a "feature." Does anyone have any thoughts?
Also, I've only tested this in Firefox, and you can view the original Stack Overflow thread here.