From 8b56c7091169c0fb057d7afac041a23a4700bcdb Mon Sep 17 00:00:00 2001 From: Mateusz Jaworski Date: Sat, 14 Oct 2017 07:31:03 +0200 Subject: [PATCH] fix: Allow for changing focus in lifecycle hooks (#1988) --- docs/change-log.md | 1 + render/render.js | 2 +- render/tests/test-input.js | 10 ++++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/change-log.md b/docs/change-log.md index c365276d..99997ba7 100644 --- a/docs/change-log.md +++ b/docs/change-log.md @@ -40,6 +40,7 @@ - core: `Object.prototype` properties can no longer interfere with event listener calls. - API: Event handlers, when set to literally `undefined` (or any non-function), are now correctly removed. - core: `xlink:href` attributes are now correctly removed +- core: render() function can no longer prevent from changing `document.activeElement` in lifecycle hooks --- diff --git a/render/render.js b/render/render.js index 0b881b2b..8674925b 100644 --- a/render/render.js +++ b/render/render.js @@ -664,9 +664,9 @@ module.exports = function($window) { if (!Array.isArray(vnodes)) vnodes = [vnodes] updateNodes(dom, dom.vnodes, Vnode.normalizeChildren(vnodes), false, hooks, null, namespace === "http://www.w3.org/1999/xhtml" ? undefined : namespace) dom.vnodes = vnodes - for (var i = 0; i < hooks.length; i++) hooks[i]() // document.activeElement can return null in IE https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement if (active != null && $doc.activeElement !== active) active.focus() + for (var i = 0; i < hooks.length; i++) hooks[i]() } return {render: render, setEventCallback: setEventCallback} diff --git a/render/tests/test-input.js b/render/tests/test-input.js index d61bad54..1f9a24d7 100644 --- a/render/tests/test-input.js +++ b/render/tests/test-input.js @@ -30,6 +30,16 @@ o.spec("form inputs", function() { o($window.document.activeElement).equals(input.dom) }) + o("maintains focus when changed manually in hook", function() { + var input = {tag: "input", attrs: {oncreate: function() { + input.dom.focus(); + }}}; + + render(root, [input]) + + o($window.document.activeElement).equals(input.dom) + }) + o("syncs input value if DOM value differs from vdom value", function() { var input = {tag: "input", attrs: {value: "aaa", oninput: function() {}}} var updated = {tag: "input", attrs: {value: "aaa", oninput: function() {}}}