HiDeoo / intro.js-react

Intro.js react wrapper
MIT License
395 stars 58 forks source link

invoking refresh sometimes throws because of null tooltipLayer #70

Closed walkermalling closed 2 years ago

walkermalling commented 2 years ago

Versions: intro.js ^4.1.0 intro.js-react ^0.5.0

Error:

TypeError: tooltipLayer is null

placeTooltip
node_modules/intro.js/intro.js:2546

  2543 | var currentTooltipPosition;
  2544 | hintMode = hintMode || false; //reset the old style
  2545 | 
> 2546 | tooltipLayer.style.top = null;
       | ^  2547 | tooltipLayer.style.right = null;
  2548 | tooltipLayer.style.bottom = null;
  2549 | tooltipLayer.style.left = null;

refresh
node_modules/intro.js/intro.js:4168

  4165 | if (this._currentStep !== undefined && this._currentStep !== null) {
  4166 |   var oldArrowLayer = document.querySelector(".introjs-arrow");
  4167 |   var oldtooltipContainer = document.querySelector(".introjs-tooltip");
> 4168 |   placeTooltip.call(this, this._introItems[this._currentStep].element, oldtooltipContainer, oldArrowLayer);
       | ^  4169 | } //re-align hints
  4170 | 
  4171 | 

Comments:

I'm using the ref from <Hints /> to call into the refresh api. I have to do this to get hints to reposition after layout changes. I have a condition in the ref function to only call refresh if the layout has changed. I haven't been able to determine a specific set of circumstances that triggers this error, but it does consistently trigger with use. This leads me to believe it may be a race condition (but that is without diving into your source).

If you have any suggestions on how to prevent this, please let me know!

HiDeoo commented 2 years ago

I have not personally hit this issue yet, but if you search this repo for null or nodes related issues, you can already see a few of them, and they're all related to issues in the intro.js codebase which seems to contain a lot of code not null / undefined type-guarded and the error you pasted kinda makes me think the issue could be on the intro.js side without a more thorough review.

From the error, it looks like it may even be related to https://github.com/usablica/intro.js/issues/1282.

walkermalling commented 2 years ago

Thanks @HiDeoo , after some more debugging I completely agree. I'll take this up with intro.js