add targetElement into onBeforeChange

[WebdevMerlion]

It would be nice to trigger some actions on element before leave his step. Example of auto open popup and set nextStepElement to element inside this popup

[Walker]

I needed to do something like this, but I managed it by partially applying (and thus enclosing) a reference to the steps array into the onBeforeChange function. I did it this way because there are multiple intros in my project, and the onBeforeChange function is injected into the Steps component.

So, if you have a config like this:

let action = actionToPerform; // like a redux action
let config = {
  steps: [...], 
  onBeforeChange: (context) => (nextStepIndex) => {
    let idOfNextEl = context.steps[nextStepIndex].element; // get current steps from enclosed context
    if (idOfNextEl === someId) {
      return action;
    }
    return; // don't return false unless you want to prevent next step
  }
}

Then you can provide an up-to-date list of the steps to the onBeforeChange function, allowing you to find the element. Once you have the id, you can perform checks, such as whether it is currently rendered, or in the viewport.

import config from 'somewhere';
let steps = felteredSteps;

let withContext = (context) => (nextStepIndex) => {
  let action = config.onBeforeChange(context)(nextStepIndex);
  if (action) { 
    dispatch(action);
  }
}

let onBeforeChange = withContext({ steps })

<Steps
  enabled={isEnabled}
  steps={steps}
  initialStep={config.initialStep}
  onBeforeChange={onBeforeChange}
 />

The issue I've found is that intro-js will advance to the next step before the action you take has a chance to repaint. If anyone has an idea of how to delay the next step, I'm all ears.

[HiDeoo]

The issue I've found is that intro-js will advance to the next step before the action you take has a chance to repaint. If anyone has an idea of how to delay the next step, I'm all ears.

Looks like a common issue with intro.js.