Skip to content

Core: Add methods to work around IE active element bugs #1478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Core: Add methods to work around IE active element bugs #1478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1e1548
Core: Add methods to work around IE active element bugs
scottgonzalez Mar 9, 2015
6091afa
[fixup]: Internal use only comments
scottgonzalez Mar 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/autocomplete.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ $.widget( "ui.autocomplete", {
previous = this.previous;

// only trigger when focus was lost (click on menu)
if ( this.element[ 0 ] !== this.document[ 0 ].activeElement ) {
if ( this.element[ 0 ] !== $.ui.safeActiveElement( this.document[ 0 ] ) ) {
this.element.focus();
this.previous = previous;
// #6109 - IE triggers two focus events and the second
Expand Down
25 changes: 25 additions & 0 deletions ui/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,31 @@ $.extend( $.ui, {
SPACE: 32,
TAB: 9,
UP: 38
},

// Internal use only
safeActiveElement: function( document ) {
var activeElement;

// Support: IE 9 only
// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
try {
activeElement = document.activeElement;
} catch ( error ) {
activeElement = document.body;
}

return activeElement;
},

// Internal use only
safeBlur: function( element ) {

// Support: IE9 - 10 only
// If the <body> is blurred, IE will switch windows, see #9420
if ( element && element.nodeName.toLowerCase() !== "body" ) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In mobile we also make sure that we avoid blurring the window. In fact, the code for retrieving the window and the document from the element is copied from the widget factory :)
https://github.com/jquery/jquery-mobile/pull/7927/files#diff-103715cf0e3db43f218c7235fd2a18fbR213

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I saw that, it seemed really whacky. When are you ever passing a window?

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the reason for that is that if you ever pass event.target or the context of an event handler you may end up passing in the window. I don't believe document.activeElement can ever be set to the window. I guess the basic assumption was that $( window ).blur() is unsafe in the same way as $( "body" ).blur() in that it results in the window losing focus. However, I've now tested $( window ).blur() as far back as IE6 and it does not seem to do anything, so I guess attempting to blur the window is safe.

I used the following test:

<!doctype html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
setTimeout( function() {
    $( "#console" ).text( "blurring window\n" );
    $( window ).blur();
}, 5000 );
    </script>
</head>
<body>
    <pre><code id="console"></code></pre>
    <input>
</body>
</html>

and I tried both with focus initially set to default and with focus immediately set on the input by my clicking on it.

$( element ).blur();
}
}
});

Expand Down
26 changes: 7 additions & 19 deletions ui/dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,8 +191,7 @@ return $.widget( "ui.dialog", {
enable: $.noop,

close: function( event ) {
var activeElement,
that = this;
var that = this;

if ( !this._isOpen || this._trigger( "beforeClose", event ) === false ) {
return;
Expand All @@ -205,21 +204,10 @@ return $.widget( "ui.dialog", {

if ( !this.opener.filter( ":focusable" ).focus().length ) {

// support: IE9
// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
try {
activeElement = this.document[ 0 ].activeElement;

// Support: IE9, IE10
// If the <body> is blurred, IE will switch windows, see #4520
if ( activeElement && activeElement.nodeName.toLowerCase() !== "body" ) {

// Hiding a focused element doesn't trigger blur in WebKit
// so in case we have nothing to focus on, explicitly blur the active element
// https://bugs.webkit.org/show_bug.cgi?id=47182
$( activeElement ).blur();
}
} catch ( error ) {}
// Hiding a focused element doesn't trigger blur in WebKit
// so in case we have nothing to focus on, explicitly blur the active element
// https://bugs.webkit.org/show_bug.cgi?id=47182
$.ui.safeBlur( $.ui.safeActiveElement( this.document[ 0 ] ) );
}

this._hide( this.uiDialog, this.options.hide, function() {
Expand Down Expand Up @@ -263,7 +251,7 @@ return $.widget( "ui.dialog", {
}

this._isOpen = true;
this.opener = $( this.document[ 0 ].activeElement );
this.opener = $( $.ui.safeActiveElement( this.document[ 0 ] ) );

this._size();
this._position();
Expand Down Expand Up @@ -319,7 +307,7 @@ return $.widget( "ui.dialog", {

_keepFocus: function( event ) {
function checkFocus() {
var activeElement = this.document[0].activeElement,
var activeElement = $.ui.safeActiveElement( this.document[0] ),
isActive = this.uiDialog[0] === activeElement ||
$.contains( this.uiDialog[0], activeElement );
if ( !isActive ) {
Expand Down
15 changes: 2 additions & 13 deletions ui/draggable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,25 +142,14 @@ $.widget("ui.draggable", $.ui.mouse, {
},

_blurActiveElement: function( event ) {
var document = this.document[ 0 ];

// Only need to blur if the event occurred on the draggable itself, see #10527
if ( !this.handleElement.is( event.target ) ) {
return;
}

// support: IE9
// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
try {

// Support: IE9, IE10
// If the <body> is blurred, IE will switch windows, see #9520
if ( document.activeElement && document.activeElement.nodeName.toLowerCase() !== "body" ) {

// Blur any element that currently has focus, see #4261
$( document.activeElement ).blur();
}
} catch ( error ) {}
// Blur any element that currently has focus, see #4261
$.ui.safeBlur( $.ui.safeActiveElement( this.document[ 0 ] ) );
},

_mouseStart: function(event) {
Expand Down
4 changes: 2 additions & 2 deletions ui/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ return $.widget( "ui.menu", {
// Open submenu on click
if ( target.has( ".ui-menu" ).length ) {
this.expand( event );
} else if ( !this.element.is( ":focus" ) && $( this.document[ 0 ].activeElement ).closest( ".ui-menu" ).length ) {
} else if ( !this.element.is( ":focus" ) && $( $.ui.safeActiveElement( this.document[ 0 ] ) ).closest( ".ui-menu" ).length ) {

// Redirect focus to the menu
this.element.trigger( "focus", [ true ] );
Expand Down Expand Up @@ -135,7 +135,7 @@ return $.widget( "ui.menu", {
},
blur: function( event ) {
this._delay(function() {
if ( !$.contains( this.element[0], this.document[0].activeElement ) ) {
if ( !$.contains( this.element[0], $.ui.safeActiveElement( this.document[0] ) ) ) {
this.collapseAll( event );
}
});
Expand Down
4 changes: 2 additions & 2 deletions ui/spinner.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,10 +155,10 @@ return $.widget( "ui.spinner", {
// If the input is focused then this.previous is properly set from
// when the input first received focus. If the input is not focused
// then we need to set this.previous based on the value before spinning.
previous = this.element[0] === this.document[0].activeElement ?
previous = this.element[0] === $.ui.safeActiveElement( this.document[0] ) ?
this.previous : this.element.val();
function checkFocus() {
var isActive = this.element[0] === this.document[0].activeElement;
var isActive = this.element[0] === $.ui.safeActiveElement( this.document[0] );
if ( !isActive ) {
this.element.focus();
this.previous = previous;
Expand Down
2 changes: 1 addition & 1 deletion ui/tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ return $.widget( "ui.tabs", {
},

_tabKeydown: function( event ) {
var focusedTab = $( this.document[0].activeElement ).closest( "li" ),
var focusedTab = $( $.ui.safeActiveElement( this.document[0] ) ).closest( "li" ),
selectedIndex = this.tabs.index( focusedTab ),
goingForward = true;

Expand Down