Fix(ui,utils): firstElementChild not in Edge (closes #798)

w3c · May 27, 2016 · 64c43aa · 64c43aa
1 parent 63b58df
commit 64c43aa
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 4 deletions.
diff --git a/js/core/ui.js b/js/core/ui.js
@@ -132,7 +132,7 @@ define(
                                     })
                                     .appendTo($div)
                                     ;
-                doc.firstElementChild.addEventListener("click", function(){
+                doc.documentElement.addEventListener("click", function(){
                     if(window.getComputedStyle($menu[0]).display === "block"){
                         $menu.fadeOut(200);
                     }

diff --git a/js/core/utils.js b/js/core/utils.js
@@ -34,13 +34,35 @@ define(
                 return function(doc, insertionPoint) {
                     node.remove();
                     doc.adoptNode(node);
-                    if (insertionPoint.firstElementChild) {
-                        insertionPoint.insertBefore(node, insertionPoint.firstElementChild);
+                    var firstElementChild = this.findFirstElementChild(insertionPoint);
+                    if (firstElementChild) {
+                        insertionPoint.insertBefore(node, firstElementChild);
                         return;
                     }
                     insertionPoint.appendChild(node);
-                };
+                }.bind(this);
             }
+        /**
+         * Finds the first Element child, given a node. Provides support for
+         * Microsoft Edge's missing support of .firstElementChild.
+         *
+         * @param  {Node} node The node to be traversed.
+         * @return {Element}   The first Element in the child list.
+         */
+        ,   findFirstElementChild: function(node){
+            if(!node.hasChildNodes()){
+                return null;
+            }
+            // We have native support
+            if(node.firstElementChild){
+                return node.firstElementChild;
+            }
+            return Array
+                .from(node.childNodes)
+                .find(function(node){
+                    return node.nodeType === Node.ELEMENT_NODE;
+                });
+        }
         ,   calculateLeftPad: function(text) {
                 if (typeof text !== "string") {
                     throw new TypeError("Invalid input");

diff --git a/tests/spec/core/utils-spec.js b/tests/spec/core/utils-spec.js
@@ -98,6 +98,20 @@ describe("Core - Utils", function() {
     });
   });
 
+  describe("findFirstElementChild() method", function(){
+    it("doesn't find elements when there are none to find", function(done){
+      var textNode = document.createTextNode("text");
+      expect(utils.findFirstElementChild(textNode)).toBe(null);
+      done();
+    });
+    it("finds the first Element child amongst a list of nodes", function(done){
+      var div = document.createElement("div");
+      div.innerHTML = "text <span>pass</span> text <span>fail</span> text";
+      expect(utils.findFirstElementChild(div)).toBeTruthy();
+      expect(utils.findFirstElementChild(div).textContent).toEqual("pass");
+      done();
+    });
+  });
 
   describe("toESIterable() method", function() {