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:
3
index.js
3
index.js
@@ -6,6 +6,7 @@ var forEachEls = require("./lib/foreach-els.js")
|
||||
var newUid = require("./lib/uniqueid.js")
|
||||
|
||||
var noop = require("./lib/util/noop")
|
||||
var contains = require("./lib/util/contains.js")
|
||||
|
||||
var on = 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.
|
||||
// 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 {
|
||||
document.activeElement.blur()
|
||||
} catch (e) { }
|
||||
|
||||
12
lib/util/contains.js
Normal file
12
lib/util/contains.js
Normal file
@@ -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
|
||||
}
|
||||
16
tests/lib/util/contains.js
Normal file
16
tests/lib/util/contains.js
Normal file
@@ -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