Joyride overlay flickering, flashing between steps

[magda5281]

Hi,
I am new to Joyride.
I have seen that someone asked about that issue -Joyride overlay disappears between steps causing the flashing/ jumpy effect - some time ago but I couldn't find a solution anywhere. Could anyone advise if that was solved anywhere?

Thank you.
Magda

Screen.Recording.2022-12-16.at.10.40.34.mov

[gilbarbara]

Hey @magda5281

Is this happening on production too or just development? Are you using StrictMode?
Does the flickering happen on https://react-joyride.com/?

[magda5281]

Hi, No on https://react-joyride.com/ it is not happening. Which is why I thought I might be doing something wrong in my local project. Magda

…

On Fri, Dec 16, 2022 at 2:40 PM Gil Barbara ***@***.***> wrote: Hey @magda5281 <https://github.com/magda5281> Is this happening on production too or just development? Are you using StrictMode? Does the flickering happen on https://react-joyride.com/? — Reply to this email directly, view it on GitHub <#872 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATHSTFHKOWF4VKA6WWZSXIDWNR5PLANCNFSM6AAAAAATA7GDEA> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[evansking]

Been 4 month, but did you get to the bottom of this? Same issue here.

[evansking]

Looks like StrictMode is the issue

[juniorforlife]

@evansking @magda5281 I’m facing the issue. Apart from StrictMode, setTimeout to move to next steps will also cause the flickering

[blacktail]

It's true, StrictMode cause this issue. React will force to do twice rendering in StrictMode

[kaleb110]

turn off strict mode in next.config.js in development.

[Amoji09]

This worked for me. Thank you!

[maoryadin]

@gilbarbara
@kaleb110
I can confirm that the problem is occurs when there is a setTimeout, using react-joyride@latest is not resolve the issue:
example:

      // Add input event listener for input/select elements to trigger validation dynamically.
      if (targetElement instanceof HTMLInputElement) {
        const handleInput = () => {
          if (step.data.validateStep?.(targetElement)) {
            targetElement.removeEventListener('input', handleInput)
            setTimeout(() => {
              activeTour.tourActions.next()
            }, 0)
          } else {
            setShowHint(true)
          }
        }
        targetElement.addEventListener('input', handleInput)
        return () => targetElement.removeEventListener('input', handleInput)
      }
    } else {
      // If no validation is required, attach a click handler to proceed.
      const handleClick = () => {
        setTimeout(() => {
          activeTour.tourActions.next()
        }, 0)
      }
      targetElement.addEventListener('click', handleClick)
      return () => targetElement.removeEventListener('click', handleClick)
    }
  }, [targetElement, step.data.validateStep, activeTour.tourActions])

[novirusallowed]

Same issue. Happens in production too with strictMode off