fix: ensure components added with an index are added in the correct l…

…ocation (#6297)

src/js/component.js

@@ -492,8 +492,12 @@ class Component {
     // Add the UI object's element to the container div (box)
     // Having an element is not required
     if (typeof component.el === 'function' && component.el()) {
-      const childNodes = this.contentEl().children;
-      const refNode = childNodes[index] || null;
+      // If inserting before a component, insert before that component's element
+      let refNode = null;
+
+      if (this.children_[index + 1] && this.children_[index + 1].el_) {
+        refNode = this.children_[index + 1].el_;
+      }
 
       this.contentEl().insertBefore(component.el(), refNode);
     }

test/unit/component.test.js

@@ -146,6 +146,24 @@ QUnit.test('should add a child component to an index', function(assert) {
   comp.dispose();
 });
 
+QUnit.test('should insert element relative to the element of the component to insert before', function(assert) {
+
+  // for legibility of the test itself:
+  /* eslint-disable no-unused-vars */
+
+  const comp = new Component(getFakePlayer());
+
+  const child0 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c0'})});
+  const child1 = comp.addChild('component', {createEl: false});
+  const child2 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c2'})});
+  const child3 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c3'})});
+  const child4 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c4'})}, comp.children_.indexOf(child2));
+
+  assert.ok(child2.el_.previousSibling === child4.el_, 'addChild should insert el before its next sibling\'s element');
+
+  /* eslint-enable no-unused-vars */
+});
+
 QUnit.test('addChild should throw if the child does not exist', function(assert) {
   const comp = new Component(getFakePlayer());