Merge #2075 into next (#2175)

* fix: Access document.activeElement through a function that eats errors for IE (#2075)

* test: inline iframe.js so ospec doesn't try to run it

docs/change-log.md

@@ -65,12 +65,22 @@
 
 ---
 
-### v1.1.7
 
-- Stream references no longer magically coerce to their underlying values ([#2150](https://github.com/MithrilJS/mithril.js/pull/2150), breaking change: `mithril-stream@2.0.0`)
+### v1.2.0
+
+#### News
+
 - Promise polyfill implementation separated from polyfilling logic.
 - `PromisePolyfill` is now available on the exported/global `m`.
 
+#### Bug fixes
+
+- core: Workaround for [Internet Explorer bug](https://www.tjvantoll.com/2013/08/30/bugs-with-document-activeelement-in-internet-explorer/) when running in an iframe
+
+#### Note
+
+- Stream references no longer magically coerce to their underlying values ([#2150](https://github.com/MithrilJS/mithril.js/pull/2150), stream breaking change: `mithril-stream@2.0.0`)
+
 ---
 
 ### v1.1.6

render/render.js

@@ -35,6 +35,15 @@ module.exports = function($window) {
 		}
 	}
 
+	// IE9 - IE11 (at least) throw an UnspecifiedError when accessing document.activeElement when
+	// inside an iframe. Catch and swallow this error, and heavy-handidly return null.
+	function activeElement() {
+		try {
+			return $doc.activeElement
+		} catch (e) {
+			return null
+		}
+	}
 	//create
 	function createNodes(parent, vnodes, start, end, hooks, nextSibling, ns) {
 		for (var i = start; i < end; i++) {
@@ -683,7 +692,7 @@ module.exports = function($window) {
 				// Only do the coercion if we're actually going to check the value.
 				/* eslint-disable no-implicit-coercion */
 				//setting input[value] to same value by typing on focused element moves cursor to end in Chrome
-				if ((vnode.tag === "input" || vnode.tag === "textarea") && vnode.dom.value === "" + value && vnode.dom === $doc.activeElement) return
+				if ((vnode.tag === "input" || vnode.tag === "textarea") && vnode.dom.value === "" + value && vnode.dom === activeElement()) return
 				//setting select[value] to same value while having select open blinks select dropdown in Chrome
 				if (vnode.tag === "select" && old !== null && vnode.dom.value === "" + value) return
 				//setting option[value] to same value while having select open blinks select dropdown in Chrome
@@ -708,7 +717,10 @@ module.exports = function($window) {
 		else if (
 			hasPropertyKey(vnode, key, ns)
 			&& key !== "className"
-			&& !(vnode.tag === "option" && key === "value")
+			&& !(key === "value" && (
+				vnode.tag === "option"
+				|| vnode.tag === "select" && vnode.dom.selectedIndex === -1 && vnode.dom === activeElement()
+			))
 			&& !(vnode.tag === "input" && key === "type")
 		) {
 			vnode.dom[key] = null
@@ -747,7 +759,7 @@ module.exports = function($window) {
 		}
 	}
 	function isFormAttribute(vnode, attr) {
-		return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === $doc.activeElement || vnode.tag === "option" && vnode.dom.parentNode === $doc.activeElement
+		return attr === "value" || attr === "checked" || attr === "selectedIndex" || attr === "selected" && vnode.dom === activeElement() || vnode.tag === "option" && vnode.dom.parentNode === $doc.activeElement
 	}
 	function isLifecycleMethod(attr) {
 		return attr === "oninit" || attr === "oncreate" || attr === "onupdate" || attr === "onremove" || attr === "onbeforeremove" || attr === "onbeforeupdate"
@@ -859,7 +871,7 @@ module.exports = function($window) {
 	function render(dom, vnodes) {
 		if (!dom) throw new Error("Ensure the DOM element being passed to m.route/m.mount/m.render is not undefined.")
 		var hooks = []
-		var active = $doc.activeElement
+		var active = activeElement()
 		var namespace = dom.namespaceURI
 
 		// First time rendering into a node clears it out
@@ -869,7 +881,7 @@ module.exports = function($window) {
 		updateNodes(dom, dom.vnodes, vnodes, hooks, null, namespace === "http://www.w3.org/1999/xhtml" ? undefined : namespace)
 		dom.vnodes = vnodes
 		// document.activeElement can return null in IE https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
-		if (active != null && $doc.activeElement !== active && typeof active.focus === "function") active.focus()
+		if (active != null && activeElement() !== active && typeof active.focus === "function") active.focus()
 		for (var i = 0; i < hooks.length; i++) hooks[i]()
 	}
 

render/tests/manual/iframe.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <div id="root"></div>
+        <script src="../../../mithril.js"></script>
+        <script>
+            var count = 0
+
+            var Button = {
+                view: function() {
+                    return m(
+                        "button",
+                        {onclick: function() { count += 1 }},
+                        "Inside the iframe: " + count)
+                }
+            }
+
+            m.mount(document.getElementById("root"), Button)
+        </script>
+    </body>
+</html>

render/tests/manual/index.html

@@ -0,0 +1,9 @@
+<html>
+    <body>
+        Various parent website content.
+        There should be a clickable button below, which is inside an iframe containing a mithril app:
+        <div>
+            <iframe src="./iframe.html"></iframe>
+        </div>
+    </body>
+</html>