Sliding broken when slide content is wrapped in anchor tag

[selrond]

example on CodeSandbox

When slide content is wrapped inside <a /> tag, sliding behaves weirdly; unusable on FF and Safari, Chrome deals with it somehow.

I believe this comes from here:

img elements and a elements with an href attribute have their draggable attribute set to true by default.

HTML spec - Drag and drop

Here's the code I think is related to this, with the proposed solution:

export const swipeStart = (e, swipe, draggable) => {
  e.target.tagName === "IMG" && e.preventDefault();

+  // my proposed solution
+  e.target.tagName === "A" && e.preventDefault();

  if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return "";
  return {
    dragging: true,
    touchObject: {
      startX: e.touches ? e.touches[0].pageX : e.clientX,
      startY: e.touches ? e.touches[0].pageY : e.clientY,
      curX: e.touches ? e.touches[0].pageX : e.clientX,
      curY: e.touches ? e.touches[0].pageY : e.clientY
    }
  };
};

source

What do you think?

[franciscomorais]

you can solve this problem if you adds the draggable attribute setted by false.

[selrond]

@franciscomorais try it on the codesandbox link I provided - it does not work

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[selrond]

this is not stale, the problem still occurs

[Xb0X]

@selrond your fix is definitely needed !!! maybe you should open the PR :) If no I won't resist to do it 😄

[selrond]

@Xb0X go ahead!

[Mikhail-MM]

Is this fixed yet? Seeing this issue in production and not sure how to proceed. Is this only a React-Slick issue or Slick Carousel in general? I swear this type of formatting has worked when called .slick() in the jQuery implementation

[ashraf-gemini]

@Mikhail-MM @selrond

Here's a fix,

1. set the draggable attribute to true on the tag
2. and onDragStart={(e) => e.preventDefault()}

<Slider {...sliderSettings}>
  <div>
    <a href="#" draggable="true" onDragStart={(e) => e.preventDefault()}>
      <BgImage url="http://placekitten.com/g/400/200" />
    </a>
  </div>
// ... other slider items
</Slider>

Here's the working CSB link - https://codesandbox.io/s/react-slick-forked-v79dnj?file=/src/index.js