Drag events do not get handled by <Slider> trayProps

• pure-react-carousel version: master
• react version: v16.8.6
• browser used: Chrome v 78.0.3904.108
• node version: v8.11.1

Relevant code or config:

function eventLogger(ev) {
  console.log(ev.type, ev.target);
}

return (
  <CarouselProvider ... dragEnabled={true}>
    <Slider trayProps={{
      onDrag: eventLogger,
      onDragEnd: eventLogger,
      onDragEnter: eventLogger,
      onDragExit: eventLogger,
      onDragLeave: eventLogger,
      onDragOver: eventLogger,
      onDragStart: eventLogger
    }}>
      <Slide>...</Slide>
      <Slide>...</Slide>
      <Slide>...</Slide>
    </Slider>
  </CarouselProvider>
)

What you did:

Applied drag events on slides.

What happened:

Nothing is reported by the eventLogger function.

Reproduction:

See https://github.com/express-labs/pure-react-carousel/blob/fe25e75227b17101ae13a23e6421fbad6d36fe0b/src/App/examples/Example11/Example11.jsx for reproducible code.

Problem description:

I would like to track drag events on slides, in order to get the current selected slide (which is used as state elsewhere in the web app).

Currently, I am only able to use the button onClick handlers to modify a “current-slide” state property.

Suggested solution:

Enable drag events.

Can you help us fix this issue by submitting a pull request?

[vsolanogo]

Are there any workarounds?

[alexpreynolds]

I’ve moved on to other work, but I’ll close this up for the time being.