ismail9k / vue3-carousel

Vue 3 carousel component
https://ismail9k.github.io/vue3-carousel/
MIT License
666 stars 166 forks source link

Input fields inside slides can't be selected by click or touch #220

Closed CryHavok01 closed 1 year ago

CryHavok01 commented 1 year ago

On version 0.1.46, any text input fields inside a slide can't be interacted with by click or tap. Some types of input fields that only rely on clicking to interact do still work, such as checkboxes, radio, and date inputs. The issue seems to be with input fields that require typing. The fields can still be navigated to using the tab key, but that is the only way to interact with them. This is occurring regardless of styling, number of slides, or scroll settings. It seems to occur across all browsers. Here is an example of a simple test carousel I've used to recreate the issue:

<template>
    <carousel :settings="settings" ref="carouselRef">
      <slide :key="1">
        <div>
          one
          <input type="text" />
        </div>
      </slide>
      <slide :key="2">
        <div>
          two
          <input type="number" />
        </div>
      </slide>
      <slide :key="3">
        <div>
          three
          <input type="search" />
        </div>
      </slide>
    </carousel>
</template>

<script setup>
import { ref } from "vue";
import { Carousel, Slide } from "vue3-carousel";

const carouselRef = ref();
const settings = {
  itemsToShow: 1,
  itemsToScroll: 1,
};
</script>