Can we use spotlightClicks without a controlled/stepIndex mode?

[jimmythecode]

I've set up a simple demo in sandbox with a basic set-up. Step 4 uses Button1 as a target, and I've set the prop for Step 4 spotlightClicks: true. This works, and allows the button to be clicked, but then it doesn't move to the next step.

Do I need to switch to controlled mode to use this feature or can it be achieved with the basic set up?

Also (bonus question), if using the spotlightClicks feature to click a button to another page (using react router), can Joyride move from my id="#button1" element in Step 4, to a new element (eg id="button2"), on another page? I'm wondering if there's a point between closing one route and opening another where Joyride has no target and this might break the component.

[gilbarbara]

hey @jimmythecode

The spotlightClicks works with both modes, uncontrolled or controlled.
However, this library only has control of the elements it creates, so clicking a button in your code won't have any direct effect on the tour...

If you need the tour to work in different contexts (routes in your case) then you'll need to use the controlled mode.

You'll need a handler in this button to stop the tour, increase the stepIndex, and after the route loads (and your next target is visible) start the tour again.

[jimmythecode]

Yeah that makes sense to me. I've a question that touches on what we've been discussing. If we use spotlightClicks: true and I click a button within, is there a way to progress a step forward purely within Joyride (eg using its callback function)?

I've created a codesandbox to demonstrate:
https://codesandbox.io/s/joyride-controlled-demos-hwojx?file=/src/Tutorials/SpotlightInternal.js

If you go to the "spotlightClicks Internal Handling" option in the menu it will explain better. Thanks!

[gilbarbara]

No

[gilbarbara]

This spotlightClicks prop only makes the spotlight area not capture the clicks using the CSS pointer-events: none statement. That's the only change.

It's impossible for this library to watch/interact/respond to interactions in your app. The only thing it knows is the target class/element. Period.

[jimmythecode]

Nooo, sorry, I mustn't have been clear. I wasn't asking it to interact with my app. I want it to allow me to click an element (as it does with spotlightClicks:true, so my app does its interactions itself. It's just I want to know if Joyride can update itself - for example, it updates its own state when I click within the spotlight. I could then use the callback to update my own state.

So when I click away from a tooltip, Joyride responds to this. I wondered if it can do the same when I click within the tooltip.

[gilbarbara]

Since the spotlight doesn't capture clicks because of pointer-events property it won't respond to any interactions.