Flickering tooltip and missed click events when deferring step advancement with setTimeout

[maoryadin]

What’s happening
When a tour step relies on a click to advance, we wrap the call to activeTour.tourActions.next() in a setTimeout(..., 0) so that the click event has time to fire. However, deferring the advancement this way makes the tooltip flash (it briefly unmounts and remounts) and the original click on the target gets lost—so the step never actually registers the click.

Expected behavior
• The tooltip should wait for the user’s click, advance immediately afterward, and capture that click without visual flicker.

Actual behavior
• Using setTimeout(..., 0) to defer next() causes the tooltip to unmount/remount (flicker) and the click on the element isn’t registered.
• Removing the setTimeout stops the flicker but advances the step before the click can be processed, so validation or click handlers fail to fire.

// In TourValidationTooltip.tsx
useEffect(() => {
  if (!targetElement) return;
  if (step.data.validateStep) {
    // …validation logic…
  } else {
    // We defer next() so the click can occur, but this causes the tooltip to flicker
    const handleClick = () => {
      setTimeout(() => activeTour.tourActions.next(), 0);
    };
    targetElement.addEventListener('click', handleClick);
    return () => targetElement.removeEventListener('click', handleClick);
  }
}, [targetElement, step.data.validateStep, activeTour.tourActions]);

Why it matters
• The visual flicker disrupts the user experience.
• The click event is swallowed, so users can’t progress through the tour reliably.

it is happens in every version of react-joyride

[Batocanin]

@maoryadin did you manage to find solution for controlled stepIndex, which cause overlay to re-render and there is like flick happening?