yapplabs/ember-tether

Actions blocked from inside tether when rootElement is modified.

keppy opened this issue · 8 comments

keppy commented

Live demo app: http://tether-tester.surge.sh
Demo code: https://github.com/keppy/tether-tester

When I modify the rootElement of my ember application in app.js to be something other than the body, I am unable to receive actions from components that are nested inside of a #ember-tether block. This works fine when the rootElement is the body, which is default in ember.

I tried to fix ember-tether to work in this scenario, but didn't get anywhere. I could probably fix this if you guys are busy and someone wants to point me in the right direction.

cheers

kiwiupover commented

@keppy what version are you using of ember-tether?

lukemelia commented

@keppy I suspect we're not going to be able to do a whole lot about this. The issue is that Tether.js relocates DOM nodes to become children of the body element as part of it's positioning implementation, and Ember installs it's event handling listener on the app's rootElement. If the root element is not body, then Ember will not see the events in order to delegate them back to the right component.

The best approach will likely be to figure out how to make Tether move elements to somewhere under the rootElement. I may be wrong, but from my reading of the Tether code, doing that will be somewhere on the continuum of hard to impossible.

chrislopresto commented

Agreed that it's a nontrivial change to Tether, from what I could quickly tell. When initially putting the addon together, I played around with forcing Tether to use a non-body element. The offset math got all thrown off, so the tethered view moved, just not necessarily near its target.

chrislopresto commented

Might be easier to wire up separate event dispatching.

lukemelia commented

@krisselden has suggested changing Ember to allow the event dispatching node to be configured separately from the rootElement

krisselden commented

Someone want to write up an RFC?

chrislopresto commented

@keppy et al - I just published version 0.3.1 which provides a reasonable™️ workaround possible in the latest Hubspot Tether release. Hopefully this does the trick for everyone.

Details

Hubspot Tether works by appending tethered elements to the <body> tag. Unfortunately, this moves your
content outside of the Ember application rootElement during acceptance testing. This breaks event
dispatch and action handling, including traditional Ember test helpers like click.

In order to short-circuit Hubspot's positioning behavior, we must use static positioning on the
#ember-testing-container div as follows:

tests/index.html
<style>
  #ember-testing-container {
    /* Set position static to short-circuit Hubspot Tether's positioning */
    /* https://github.com/HubSpot/tether/pull/98/ */
    position: static !important;
  }
</style>