diff --git a/src/js/component.js b/src/js/component.js index d7037d1af..0593e0696 100644 --- a/src/js/component.js +++ b/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); } diff --git a/test/unit/component.test.js b/test/unit/component.test.js index 4f97d40dd..1b8bc0c4b 100644 --- a/test/unit/component.test.js +++ b/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());