AttachTo doesn't find elements in ember-wormhole

[BitBrit]

Hi,

I am trying to create a tour, some of which goes through an ember-bootstrap modal. Ember-bootstrap modals use ember-wormhole.

I was hoping that I would be able to use the attachTo property and it would find elements and place the tooltip accordingly but unfortunately I get the console error stating that the element in the modal can't be found so it just places the tool tip in the center of the viewport.

Is there any work around/technique that I can use to make this work or is this just completely not supported?

Thanks in advance.

[RobbieTheWagner]

Hi @BitBrit it should support targeting any elements in the DOM. Do you have a small reproduction we could play with?

[BitBrit]

I don't yet, but let me see what I can put together. Actually, knowing that it should be able to target these elements helps.

[RobbieTheWagner]

@BitBrit I do not know what wormhole does, but any elements under body should work.

[BitBrit]

Ok, then perhaps it's a timing thing. It could be looking for the element in the modal before the modal has finished rendering.

[BitBrit]

Hi @rwwagner90 Thank you for your prompt responses. My suggestion above was correct. I had to find a way to advance the tour only when the modal had completed it's rendering. This means "advanceOn" wasn't usable without creating some other special event for it to listen to.

[RobbieTheWagner]

@BitBrit glad you figured it out! I typically suggest not to use advanceOn and to manually call tour.next, so you can fully control everything.

[BitBrit]

That sounds good but the reason I used advanceOn was because I didn't want the tour logic/knowledge to bleed throughout the app. But yes, it seems to have its short-comings.

[RobbieTheWagner]

@BitBrit Sure, that makes sense. I'm open to suggestions to making advanceOn better, but I think making a custom event that is sure the element is visible might be the best option. We could also maybe have Shepherd continue to try to find the element to attach to every like 500ms or something.

[BitBrit]

@rwwagner90 that would be really good.

We are also using ember-bootstrap with a dropdown-menu element. Our tour spans this dropdown menu and so we have to wait for it to exist. ember-bootstrap usually has a way to pass an onShown() action handler. However, for dropdown menus, it does not. This meant that we had to develop our own way of trying to detect when the menu has finished opening and is in the DOM.

We thought about adding some sort of timeout after which we would know for certain the menu had finished transitioning to being open but this felt a little "hacky". So, rightly or wrongly, we decided to use this:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

So that it doesn't become a performance problem we scoped the conditions as to when this would fire as tightly as possible. Your suggestion would mean that we wouldn't have to implement things like this to handle transitions.

[RobbieTheWagner]

@BitBrit can we add an onShown to ember-bootstrap perhaps? I think it feels more correct to know for sure when the thing is rendered, and then fire the event, rather than polling.

[BitBrit]

@rwwagner90 I agree. Being told when something has happened is always better than asking repeatedly. I will look into making a PR for that.