Why is it not effective to bind the click event on the 'react-joyride__spotlight' dom?

[xyyit9]

Hello! Thank you very much for providing such an excellent npm package. I am trying to package this npm package into a business SDK that can be used across different websites within the company without modifying the code for each individual site. I am currently encountering some usage issues and would like to seek assistance.

I hope to be able to control the behavior of the element with class="react-joyride__spotlight" when I click on it. There are two behaviors I want to achieve:

1. Trigger the event of the underlying element, which can be done using spotlightClicks={true}.
2. Bind my own event to the react-joyride__spotlight. No matter how I try to handle this, I cannot achieve it.

1 can succeed, but 2 does not. Here is my implementation code for 2。

const portal = document.getElementById('react-joyride-portal') as HTMLElement;
if (portal) {
    portal.setAttribute('data-xyy', 'good');   // succeed
    portal.style.cursor = 'pointer';      // failed
    portal.addEventListener('click', function () {
      console.log('portal click！');        // failed
    });
}

and I also set pointer-events auto

:global {
    #react-joyride-portal{
        .react-joyride__overlay{
            pointer-events: auto !important;
        }
        .react-joyride__spotlight{
            pointer-events: auto !important;
        }
    }
}

[gilbarbara]

Hey @xyyit9

When you move your cursor over the spotlight, the overlay changes its pointer-events to none, so the click goes through, and the element behind the spotlight receives it "without interference".
Changing the overlay pointer-events to auto triggers its close listener.
If not using the disableOverlayClose: true prop, the event never reaches the portal.

So add the disableOverlayClose prop on your step(s).
Also, ensure the only style change is: .react-joyride__overlay { cursor: pointer !important; pointer-events: auto !important; }.

And then:

if (portal) {
    portal.style.cursor = 'pointer';      // This won't work since the overlay gets the cursor event, so it's using its styles.
    portal.addEventListener('click', function () {
      console.log('portal click!'); 
    });
}

The library never knows what content it interacts with; it just renders stuff on top of it.

So, you are on your own to handle everything,

• Get spotlight position and dimensions
• Identify when the Overlay click was supposed to be in the spotlight.
• Find the correct element behind the spotlight
• Re-trigger the event on the element.