Skip to content
This repository has been archived by the owner on Jun 14, 2020. It is now read-only.

Commit

Permalink
Fix modal focus issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@Craga89
Craga89 committed May 29, 2012
1 parent f61a615 commit 014e2da
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 48 deletions.
2 changes: 1 addition & 1 deletion dist/jquery.qtip.basic.js
View file
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Tue May 29 19:43:44 2012 +0100
* Date: Tue May 29 20:04:37 2012 +0100
*/

/*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.qtip.css
View file
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Tue May 29 19:43:44 2012 +0100
* Date: Tue May 29 20:04:37 2012 +0100
*/

/* Core qTip styles */
Expand Down
54 changes: 32 additions & 22 deletions dist/jquery.qtip.js
View file
Expand Up @@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Tue May 29 19:43:44 2012 +0100
* Date: Tue May 29 20:04:37 2012 +0100
*/

/*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
Expand Down Expand Up @@ -2407,6 +2407,30 @@ function Modal(api)
}
};

function focusInputs(elems) {
var inputs = tooltip.find('input:visible');

if(inputs.length < 1) { elems.blur(); }
else { inputs.first().focus(); }
}

function stealFocus(event) {
var target = $(event.target),
container = target.closest('.qtip'),
targetOnTop;

// Determine if input container target is above this
targetOnTop = container.length < 1 ? FALSE :
(parseInt(container[0].style.zIndex, 10) > parseInt(tooltip[0].style.zIndex, 10));

// If we're showing a modal, but focus has landed on an input below
// this modal, divert focus to the first visible input in this modal
// or if we can't find one... the tooltip itself
if(!targetOnTop && ($(event.target).closest(selector)[0] !== tooltip[0])) {
focusInputs(target);
}
}

$.extend(self, {
init: function()
{
Expand Down Expand Up @@ -2553,32 +2577,18 @@ function Modal(api)
// Toggle backdrop cursor style on show
overlay.toggleClass('blurs', options.blur);

// Make sure we can't focus anything outside the tooltip
// IF the modal can steal the focus
if(options.stealfocus !== FALSE) {
docBody.bind('focusin'+namespace, function(event) {
var target = $(event.target),
container = target.closest('.qtip'),
targetOnTop, inputs;

// Determine if input container target is above this
targetOnTop = container.length < 1 ? FALSE :
(parseInt(container[0].style.zIndex, 10) > parseInt(tooltip[0].style.zIndex, 10));

// If we're showing a modal, but focus has landed on an input below
// this modal, divert focus to the first visible input in this modal
// or if we can't find one... the tooltip itself
if(!targetOnTop && ($(event.target).closest(selector)[0] !== tooltip[0])) {
inputs = tooltip.find('input:visible')

if(inputs.length < 1) { target.blur(); }
else { inputs.first().focus(); }
}
});
// Make sure we can't focus anything outside the tooltip
docBody.bind('focusin'+namespace, stealFocus);

// Blur the current item and focus anything in the modal we an
focusInputs( $('*') );
}
}
else {
// Undelegate focus handler
docBody.undelegate('*', 'focusin'+namespace);
docBody.unbind('focusin'+namespace);
}

// Stop all animations
Expand Down
6 changes: 3 additions & 3 deletions dist/jquery.qtip.min.js
View file

Large diffs are not rendered by default.

52 changes: 31 additions & 21 deletions src/modal/modal.js
View file
Expand Up @@ -22,6 +22,30 @@ function Modal(api)
}
};

function focusInputs(elems) {
var inputs = tooltip.find('input:visible');

if(inputs.length < 1) { elems.blur(); }
else { inputs.first().focus(); }
}

function stealFocus(event) {
var target = $(event.target),
container = target.closest('.qtip'),
targetOnTop;

// Determine if input container target is above this
targetOnTop = container.length < 1 ? FALSE :
(parseInt(container[0].style.zIndex, 10) > parseInt(tooltip[0].style.zIndex, 10));

// If we're showing a modal, but focus has landed on an input below
// this modal, divert focus to the first visible input in this modal
// or if we can't find one... the tooltip itself
if(!targetOnTop && ($(event.target).closest(selector)[0] !== tooltip[0])) {
focusInputs(target);
}
}

$.extend(self, {
init: function()
{
Expand Down Expand Up @@ -168,32 +192,18 @@ function Modal(api)
// Toggle backdrop cursor style on show
overlay.toggleClass('blurs', options.blur);

// Make sure we can't focus anything outside the tooltip
// IF the modal can steal the focus
if(options.stealfocus !== FALSE) {
docBody.bind('focusin'+namespace, function(event) {
var target = $(event.target),
container = target.closest('.qtip'),
targetOnTop, inputs;

// Determine if input container target is above this
targetOnTop = container.length < 1 ? FALSE :
(parseInt(container[0].style.zIndex, 10) > parseInt(tooltip[0].style.zIndex, 10));

// If we're showing a modal, but focus has landed on an input below
// this modal, divert focus to the first visible input in this modal
// or if we can't find one... the tooltip itself
if(!targetOnTop && ($(event.target).closest(selector)[0] !== tooltip[0])) {
inputs = tooltip.find('input:visible')

if(inputs.length < 1) { target.blur(); }
else { inputs.first().focus(); }
}
});
// Make sure we can't focus anything outside the tooltip
docBody.bind('focusin'+namespace, stealFocus);

// Blur the current item and focus anything in the modal we an
focusInputs( $('*') );
}
}
else {
// Undelegate focus handler
docBody.undelegate('*', 'focusin'+namespace);
docBody.unbind('focusin'+namespace);
}

// Stop all animations
Expand Down

0 comments on commit 014e2da

Please sign in to comment.