Click events on clones are not working

[baeroe]

Checks

• [X] Not a duplicate.
• [X] Not a question, feature request, or anything other than a bug report directly related to React Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.7.12

Description

when you are using the splide with type="loop" then there will be clones of your element on front and end of the slide. Those clones do not fire the click event that is attached on the element.

https://github.com/Splidejs/react-splide/assets/35110665/ee4f3fb2-2d84-4db4-baa4-0aaa7750d429

Reproduction Link

https://codesandbox.io/s/react-splide-no-clickevent-on-clone-jfrlnc

Steps to Reproduce

1. open attached codesandbox
2. slide the left or right till you have an clone visible in your slider
3. Press it and watch console for log ( e.g. 'x clicked')

Expected Behaviour

For the clone the event should be fired linke for the original slide. So the clone for the slide with the index 9 should log: "#9 clicked"

[chaance]

Also running into this. Splide uses cloneNode under the hood. I suspect the only way to solve this to cover for all events would be to rewrite the cloning feature in the React port to clone the rendered components instead of the DOM node, since React is responsible for attaching those listeners.

[MaxStetsenko]

Tried using "rewind", the behavior is slightly different but similar to "Loop". But in 0.7.12 version "rewind" does not work

[austencm]

I got it working with onClick, which fires whenever a slide is clicked. If you need to have multiple interactive elements inside the slide this may be less helpful tho.

 <Splide onClick={(splide, slide, event) => doSomething()}></Splide>

[jannisstefanis]

Has there been any solution shared to fix this issue?

[chaance]

One option that might work (have not explored too deeply) is to write your own Clones component (Splide component, not React component) and use React.cloneElement. Could also be a rabbit hole so who knows. I've found it pretty tricky to get Splide to play well with React.

[markVerb]

Not using React, but encountered the same issue. You can try attaching the click handler to the document instead of the element. For example in jQuery it would be:

$(document).on('click', '.element', function(e){
    // working
});

instead of:

$('.element').on('click', function(e){
    // not working
});