Changing option dontShowAgain during execution is not reflected in the next steps

[jboivin-done]

Description

I would like to be able to control if a step includes the "don't show again" checkbox or not. Like this, I could have generic initial and final steps that would include the checkbox, but the ones in between. Trying to set the option during the onbeforechange event doesn't work even if I use this.refresh() or this.refresh(true).

Expected Behavior

The "don't show again" checkbox is hidden or shown when I change the value of the option while executing. In the example below, it should show the checkbox only on the first step.

Actual Behavior

Only the initial value is used.

Example (recommended)

Using your page https://introjs.com/docs/examples/basic/dont-show-again, you copy/paste the following code to see what I'm trying to achieve. This is only an experimental code and thus only works once. Each execution needs to refresh the page, paste the code and then click on run

introJs().setOption("dontShowAgain", true).onbeforechange(
function() {
  try {
    if (test === true) {
      console.log('SSS - Not first execution');
      this.setOption("dontShowAgain", false);
      this.refresh(true);
    }
  } catch (ex) {console.log('EEE - First execution');}  
  test = true;
  
  console.log('HHH - All executions');
}
).start();

Fix location

This could be fix without having to use refresh (which I realized is only to gather steps from HTML and in my case I am adding them in TypeScript... so.) at this place:

intro.js/src/core/showElement.ts

Line 308 in 3cab791

//show the tooltip