Tether loaded in incorrect place in 2.0.0-canary
jmurphyau opened this issue · 15 comments
Ember Version: 2.0.0-canary+4b74503e
Ember Data Version: 2.0.0+canary.2b361f9837
Ember Tether Version: 0.1.3
In the didInsertElement hook the tethered element is loaded in the incorrect place.
These are the settings being used:
offset: '10px 45px',
attachment: 'top right',
targetAttachment: 'top right',
This screenshot shows the positioning that I'm experiencing:
If I add the following to the didRender hook it correctly repositions:
this.removeTether(this._tether);
this.addTether();
Below is a screenshot of the position after adding this workaround:
I'm not sure how else to assist with this and couldn't spend any more time investigating so I thought I could at least open an issue.
This is still happening in 2.2
Instead of removing and adding the tether again in didRender, you can call position on the tether: http://github.hubspot.com/tether/overview/repositioning/
this._tether.position(); or Tether.position() for all tethers at once.
The reason we initially opted to remove and readd is because Tether left artifacts on target elements. If this is problematic, we can certainly revisit.
That said, we are using tether successfully in a 2.2 app. I am curious if your particular issue could be caused by the target not being in the DOM when the tether first renders. It would make troubleshooting very easy if you could fork the ember-tether repository and reproduce the issue in the dummy app. I'd be happy to pair on this.
As for Tether.position(), we should exclude that from this particular discussion, as any operation done in an ember-tether component instance should not bleed into other ember-tether instances.
The target element exists before and after tether is shown (it's a button that shows the tether dialog). Resizing the window forces a re-position and the position is correct. I had to use Tether.position() since I'm using via ember-modal-dialog and that does not expose ember-tether. I'll try reproducing in the dummy app.
Interesting.. let me know how it goes. I have been meaning to wire up an API at the ember-tether level to reposition an individual tether instance. It might make sense to fix a few things at once.
If I add a this._tether.position() after this.addTether it renders correctly. I can't reproduce this in the dummy app, it may be because the dummy app is too simple and there are weird things going on with order of rendering. I also thought maybe it was jquery related since I am using jquery 2.1, but I still can't replicate in the dummy app.
Can you post more complete code snippets from your app, e.g. the full templates containing the ember-tether instance and the target instance, relevant component code, etc? I'm intrigued.
Might be because I'm using it via ember-modal-dialog https://gist.github.com/kmiyashiro/0d4bf7ed818b531cd2e0
I'm using ember-tether and having the same issue. @kmiyashiro I checked out your PR, but it doesn't seem to be working for me. _tether.position() is definitely getting called on initial load, but it's still loading up on the wrong spot. Any updates on this?
@kmiyashiro @gjunkie I noticed that ember-modal-dialog's tests did not include an example of a subclassed TetherDialog component. So I upgraded to Ember 2.0.2 and added a TetherDialog subclass example here: https://github.com/yapplabs/ember-modal-dialog/compare/subclass-tether-dialog
As you can see, I copied the properties you used for your subclassed TetherDialog component. I used a button with id #target to toggle the dialog.
If you can share public code exhibiting the broken behavior, I'd be happy to take a look. Perhaps you have competing libraries or plugins trying to position things?
@chrislopresto in your example here, are you clicking "do it" before you scroll? The issue we both seem to be having is that on initial load its not where its supposed to. I'd also try showing the modal on page load rather than on click, to make absolutely sure its initially rendering in the right place.
I think the issue might be that the tethered element positions itself super fast and as soon as other elements on the page render it looks out of place... at least in my case...
Perhaps you're witnessing behavior change due to rendering/hooks firing in a different order. I'm going to cut an ember-tether branch that schedules the (Hubspot) Tether construction afterRender and point the ember-modal-dialog branch at it. Perhaps you could test with that to see if it resolves things.
Side question, have you verified that this only occurs when subclassing the TetherDialog component? Or does it also happen with the TetherDialog component itself?
I haven't had a chance to verify that :/
No worries. Ever on the lookout for red herrings.