Initial step does not show spotlight + unresponsive to resize (React 18)

#1202 · closed · 5 comments

View on GitHub ↗

MattIPv4

### Describe the bug React 18... If Joyride is set to run immediately, without a beacon, the first step does not show a spotlight correctly, and the tooltip does not respond to the screen being resized. If you move to the next step, that step works fine, and if you then move back to the first step, that step then also works fine at that point -- it is just the first step when the tour initially runs that is broken. ### react-joyride version 3.0.0. ### Reproduction link https://stackblitz.com/edit/react-joyride-ybpgbpaa ### Screenshots or videos https://github.com/user-attachments/assets/7e3c39b2-c946-452a-906d-85a518a88b81 ### Additional context _No response_

Comments

MattIPv4

Tested the same reproduction with React 19 and it does not happen, so looks to be a React 18 issue: https://stackblitz.com/edit/react-joyride-kjm2bis1

gilbarbara

Hey @MattIPv4 Yeah, I've confirmed it works with 19. I'll need to test with the other supported versions too. Did you try using debug to check if there are any clues?

MattIPv4

> Yeah, I've confirmed it works with 19. > I'll need to test with the other supported versions too. 👍 I didn't test other versions, but yeh, works in 19 and doesn't work in 18. > Did you try using debug to check if there are any clues? I couldn't see anything, the debug logs (and onEvent data) appears to be identical in 19 and 18.

gilbarbara

The issue is React 18-specific due to its automatic batching behavior (React 16/17 don't batch, React 19 refined `useSyncExternalStore` to commit external store updates individually). Both the spotlight and the floating autoUpdate effects suffered from this aggressive batching.

gilbarbara

Fixed in 3.0.2 Thanks