Buttons inside carousel first touch on mobile does not work

[LucianHij]

For a carousel that has buttons inside, on mobile, with mouseDrag = false, on first touch the on click event for button is not called. After first touch, everything works perfect.

See this example. The issue is on second carousel with buttons, but you have to change your browser into mobile view. You will notice that on first click, the console log does not appear. https://codesandbox.io/s/ncpb8

[ghighi3f]

I'm having the same problem On vue3-carousel - "version": "0.1.29"

[ghighi3f]

Found a solution here #46 , but using @touchend, the event is triggered also on drag.

[LucianHij]

I will try, but this is only a workaround. We need a proper fix for this.

[mdmullins]

possible solution is to use touchmove as a disabler for the touchend event:

<Slide
  v-for="item in items"
  :key="item"
  @touchend="handleClick({ item, type: 'touch' })"
  @touchmove="handleMove('touch')"
  @mousedown="handleMouseDown"
  @mouseup="handleClick({ item, type: 'mouse' })"
  @mousemove="handleMove('mouse')"
>

const amountMoved = ref(0);
const canDrag = ref(false);
const handleMove = (type: string) => {
  if (type === 'touch') {
    amountMoved.value += 1;
  } else if (type === 'mouse' && canDrag.value) {
    amountMoved.value += 1;
  }
};

// having to debounce the input because on touch event, a mouse event is emitted every 2 clicks (bug with carousel)
const handleClick = debounce(
  ({ item, type }) => {
    if (amountMoved.value < 10) {
      // do what you want with the click
    } else {
      amountMoved.value = 0;
      canDrag.value = false;
    }
  },
  100,
);

// for mouse event (desktop), only allowing drag once mouse is held down
const handleMouseDown = () => {
  canDrag.value = true;
};

[lucasantunes-ciandt]

Having this issue as well, also on 0.1.29