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:
Behind The Math
2018-01-24 20:18:41 -05:00
parent e3df2b1c3d
commit fa05e94f07
3 changed files with 30 additions and 1 deletions

View File

@@ -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) { }

12
lib/util/contains.js Normal file
View 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
}

View 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()
})