Buttons and Arrows Have different behavior for navigation in intro.js

Question

Using onbeforechange, I am triggering a change to the page -- opening a menu -- so that the step can highlight that menu during the tour. When I use the arrows for navigation, this works perfectly: The menu is fully rendered, the entire menu is highglighted and the tooltip is shown off to the side.

But when I use the Next button (or Back if going back), this does not work correctly in 2 different ways: 1 - The menu is not fully rendered. The menu div is displayed, but the menu items are not displayed. The menu appears empty. 2 - The tooltip appears above the (empty) menu, instead of off to the side.

There appears to be a timing issue/race condition where the step is triggered before the menu can fully render when using the buttons, but not when using the arrows.

Any idea what the cause is or how it can be fixed.

==Update== My theory was correct. I managed to "fix" this by modifying the onclick handler for the next and previous buttons and placing the call to _nextStep and _previousStep inside a setTimeout function, even for just 50ms, as follows:

    nextTooltipButton.onclick = function() {
    if (self._introItems.length - 1 !== self._currentStep) {
        
        setTimeout(function()
        {       
          _nextStep.call(self);
        },
        50);
    }
  };

However, my hope had been to make this change by simply overriding the existing function where these onclick handlers are located, but that function appears to be private and cannot be overridden. (If there is a way to do this, let me know.) Instead, I had to take a local copy of the intro.js file and modify that.

It would be good to add this minor change to the main branch, which has no discernible impact on performance.

Still looking for a better answer.