vue3-carousel component ignores first click after using the carousel in android and mobile view in the browser

[perottosson]

Describe the bug vue3-carousel component takes focus from other events in android and mobile view in the browser. For example

To Reproduce Steps to reproduce the behavior: As seen on this codepen, if you open it in the browser: if you first press the button you can see how the button pressed message is increasing. If you after that are dragging the carousel back and forth it still increases directly when pressing the button again. However if you open the same codepen on an android device the first click after using the carousel is ignored.

Expected behavior Consequent clicking :)

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: windows
• Browser chrome,
• Version [e.g. 22]

[dennisego1999]

I have the same issue, no solution yet

[perottosson]

For your information. It works when you downgrade to the prior version

[dennisego1999]

will give that a try, thanks!

[dennisego1999]

"vue3-carousel": "^0.1.38"

works for me :)

[jon-forge]

I had issues with input fields on 0.1.38 (couldn't click into them). As a workaround for 0.1.40, you can add v-model to keep track of the current slide, and for any slide with buttons (or all slides), initiate a click on a containing div (ref='slide1') when that slide is visible:

watch(currentSlide, () => {
  if (currentSlide.value == 1) {
    slide1.value.click();
  }
});

Then you shouldn't have this issue anymore. Would be nice to see this issue fixed, though, since this is a little hacky...