search

usablica / intro.js

Lightweight, user-friendly onboarding tour library
http://introjs.com
Other
22.8k stars 2.59k forks source link

If introjs() is called too quickly after exitIntro(), there is an exception because everything hasn't been cleaned up yet. #1162

Closed jderose9 closed 3 years ago

jderose9 commented 3 years ago

I'm using this in an angular application, spanning multiple routes. On each route, I call introjs().setOptions(), passing in the steps for elements displayed in that route. In the oncomplete for the first route, I navigate to the 2nd route. On the first route, introjs() works just fine, but when I get to the 2nd route, I call introjs() again with the new steps that just loaded, and get the following exception:

TypeError: null is not an object (evaluating 'oldReferenceLayer.querySelector')
_showElement — intro.js:2761
nextStep — intro.js:3171
introForElement — intro.js:4048
start — intro.js:4225

The helper layer is found here, but the reference layer is null: https://github.com/usablica/intro.js/blob/c221d5efea78be4b9a3cfd2d01585b7b81c90565/src/core/showElement.js#L83

This is because removeChild() is called with animation for the helper layer, but not for the reference layer. The reference layer is immediately removed, but the helper layer is not removed until a 500ms timeout, which occurs after the next route is loaded and introjs is called again. https://github.com/usablica/intro.js/blob/49cc77abf59ed044071a9f9082cefe2dde9af09b/src/util/removeChild.js#L19-L21

For now, my workaround was to add a 500ms delay to calling introjs() again, but it would be nice if this scenario was handled since it took a while to track down.

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.