Only blur element if it's contained by one of the selectors
Previously, Pjax would blur (remove focus) from the active element regardless of where it was on the page. This restricts that to happen only if the active element is contained by one of the elements represented by options.selectors, because only those are affected by Pjax. Fixes #4
This commit is contained in:
1 parent
e3df2b1c3d
commit
fa05e94f07
3 files changed
+30
-1
No files matched your search
@@ -6,6 +6,7 @@ var forEachEls = require("./lib/foreach-els.js")
|
|||||||
var newUid = require("./lib/uniqueid.js")
|
var newUid = require("./lib/uniqueid.js")
|
||||||
|
|
||||||
var noop = require("./lib/util/noop")
|
var noop = require("./lib/util/noop")
|
||||||
|
var contains = require("./lib/util/contains.js")
|
||||||
|
|
||||||
var on = require("./lib/events/on.js")
|
var on = require("./lib/events/on.js")
|
||||||
// var off = require("./lib/events/on.js")
|
// var off = require("./lib/events/on.js")
|
||||||
@@ -129,7 +130,7 @@ Pjax.prototype = {
|
|||||||
|
|
||||||
// Clear out any focused controls before inserting new page contents.
|
// Clear out any focused controls before inserting new page contents.
|
||||||
// we clear focus on non form elements
|
// we clear focus on non form elements
|
||||||
if (document.activeElement && !document.activeElement.value) {
|
if (document.activeElement && !document.activeElement.value && contains(this.options.selectors, document.activeElement)) {
|
||||||
try {
|
try {
|
||||||
document.activeElement.blur()
|
document.activeElement.blur()
|
||||||
} catch (e) { }
|
} catch (e) { }
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
module.exports = function contains(doc, selectors, el) {
|
||||||
|
for (var i = 0; i < selectors.length; i++) {
|
||||||
|
var selectedEls = doc.querySelectorAll(selectors[i])
|
||||||
|
for (var j = 0; j < selectedEls.length; j++) {
|
||||||
|
if (selectedEls[j].contains(el)) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
var tape = require("tape")
|
||||||
|
|
||||||
|
var contains = require("../../../lib/util/contains.js")
|
||||||
|
|
||||||
|
tape("test contains function", function(t) {
|
||||||
|
var tempDoc = document.implementation.createHTMLDocument()
|
||||||
|
tempDoc.body.innerHTML = "<div><p id='el' class='js-Pjax'></p></div><span></span>"
|
||||||
|
var selectors = ["div"]
|
||||||
|
var el = tempDoc.body.querySelector("#el")
|
||||||
|
t.equal(contains(tempDoc, selectors, el), true, "contains() returns true when a selector contains the element")
|
||||||
|
|
||||||
|
selectors = ["span"]
|
||||||
|
t.equal(contains(tempDoc, selectors, el), false, "contains() returns false when the selectors do not contain the element")
|
||||||
|
|
||||||
|
t.end()
|
||||||
|
})
|
||||||
Reference in new issue
Block a user