Cannot preventDefault() onDragStart with react-alice-carousel

[philippehenoch]

My component is use as an item in a react-alice-carousel. When dragging my carousel, I'm trying to prevent Link to be clicked. It seems that using Jelly makes onDragStart event not fired or fired when dragging very quickly. Using a canvas with stroke() makes onDragStart event fired no matter what

import React from 'react';
import Tilt from 'react-tilt';
import { Link } from 'react-router-dom';
import Jelly from 'jelly.js';
import { canvasOptions } from '../../../utils/utils';

class NightySvg extends React.Component {
  componentDidMount() {
    new Jelly(this.canvas.current, canvasOptions('#nightyPath'));
    // const ctx = this.canvas.current.getContext("2d");
    // ctx.beginPath();
    // ctx.moveTo(20,20);
    // ctx.lineTo(20,100);
    // ctx.lineTo(70,100);
    // ctx.stroke();
  }

  canvas = React.createRef();

  handleDrag(e) {
    e.preventDefault();
  }

  render() {
    return (
      <div onDragStart={this.handleDrag}>
        <svg width="289px" height="306px" version="1.1" xmlns="http://www.w3.org/2000/svg" display="none">
          <path id="nightyPath" d="M90.652..." />
        </svg>
        <Link className="menuNav-item" to="/nighty">
          <Tilt className="Tilt" options={{ max: 25 }}>
            <div className="tiltContent">
              <div>
                <span className="menuNumber">01</span>
                <div>nighty</div>
                <canvas draggable="true" ref={this.canvas}
                className="nightyCanvas Tilt-inner" width="289px" height="306px" />
              </div>
            </div>
          </Tilt>
        </Link>
      </div>
    );
  }
}

export default NightySvg;

[lmgonzalves]

It seems to be related with event listeners.
I've just made an update. Can you test it?

[philippehenoch]

It's working well, Thank you!

[philippehenoch]

@lmgonzalves when the last update will be available on npm?

[lmgonzalves]

Sorry, I just forgot to update the npm package.
Updated!