From 6c1b7c15a9e79a278e1bda1690e2d0386b0ee6a6 Mon Sep 17 00:00:00 2001 From: simonihmig Date: Sat, 8 Jun 2019 16:38:48 +0200 Subject: [PATCH] Use {{ref}} modifier to get the reference to the popper element, instead of querying by id Should hopefully work around the timing issue of https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill/issues/64, and is more "octane-ish" anyway. --- addon/components/ember-popper-base.js | 23 +++++++++++++++---- .../ember-popper-targeting-parent.hbs | 6 ++--- addon/templates/components/ember-popper.hbs | 4 ++-- package.json | 1 + yarn.lock | 19 ++++++++++++++- 5 files changed, 42 insertions(+), 11 deletions(-) diff --git a/addon/components/ember-popper-base.js b/addon/components/ember-popper-base.js index dd8da72..4563a67 100644 --- a/addon/components/ember-popper-base.js +++ b/addon/components/ember-popper-base.js @@ -126,6 +126,21 @@ export default Component.extend({ */ _popper: null, + /** + * Tracks popper element + */ + _popperElement: computed({ + get() { + return null; + }, + set(key, el) { + if (el) { + this._updatePopper(el); + } + return el; + } + }), + /** * Tracks current/previous value of popper target */ @@ -201,8 +216,8 @@ export default Component.extend({ // ================== PRIVATE IMPLEMENTATION DETAILS ================== - _updatePopper() { - if (this.isDestroying || this.isDestroyed) { + _updatePopper(popperElement = this._getPopperElement()) { + if (this.isDestroying || this.isDestroyed || !popperElement) { return; } @@ -228,8 +243,6 @@ export default Component.extend({ this._popper.destroy(); } - const popperElement = this._getPopperElement(); - // Store current values to check against on updates this._didRenderInPlace = renderInPlace; this._eventsEnabled = eventsEnabled; @@ -269,7 +282,7 @@ export default Component.extend({ * Used to get the popper element */ _getPopperElement() { - return self.document.getElementById(this.id); + return this.get('_popperElement'); }, _getPopperTarget() { diff --git a/addon/templates/components/ember-popper-targeting-parent.hbs b/addon/templates/components/ember-popper-targeting-parent.hbs index dba7faa..39607fc 100644 --- a/addon/templates/components/ember-popper-targeting-parent.hbs +++ b/addon/templates/components/ember-popper-targeting-parent.hbs @@ -1,13 +1,13 @@ -{{unbound _parentFinder}} +{{unbound this._parentFinder}} {{!-- Elements that exist deep within the document tree are given an implicitly lower z-index value than elements that aren't as deep in the tree; this has the effect of hiding our ember-popper behind less-nested elements. Due to the way z-indexing works, we cannot simply add a higher z-index value to our ember-popper. To avoid this issue, we render the element on the document body, giving it the highest default z-index value. --}} -{{#maybe-in-element _popperContainer renderInPlace}} +{{#maybe-in-element this._popperContainer this.renderInPlace}} {{!-- Add a wrapper around the yielded block so we have something for the Popper to target --}} -