diff --git a/addon/components/ember-tether.js b/addon/components/ember-tether.js index aa36703..dda13a6 100644 --- a/addon/components/ember-tether.js +++ b/addon/components/ember-tether.js @@ -29,11 +29,9 @@ export default Component.extend({ willDestroyElement() { this._super(...arguments); - let { _tether, element } = this; - run.schedule('render', () => { - this.removeElement(element); - this.removeTether(_tether); - }); + const { _tether, element } = this; + this.removeTether(_tether); + this.moveElementBackIntoParent(element); }, didRender() { @@ -65,6 +63,12 @@ export default Component.extend({ addTether() { if (get(this, '_tetherTarget')) { + // Tether moves our element in the DOM. This + // causes Glimmer 2 to be very, very confused. + // So, we save the original parent which we'll + // append the element to after we remove tether in + // removeElement + this._originalParentNode = this.element.parentNode; this._tether = new Tether(this._tetherOptions()); } }, @@ -75,10 +79,14 @@ export default Component.extend({ } }, - removeElement(element) { + moveElementBackIntoParent(element) { + // Remove the element from the body if (element.parentNode) { element.parentNode.removeChild(element); } + // For Glimmer 2 to work properly, we need to + // to readd the element to the original parent + this._originalParentNode.appendChild(element); }, _tetherTarget: computed('target', function() {