Unintended slideTo call on focusIn

[alireza0sfr]

Describe the bug
Describe the bug
When clicking an element inside a (such as an image or button) that causes navigation (e.g., to a product detail page), the slide is scrolled into view before the redirect occurs. This is due to the following code in the Slide component:
onFocusin: () => { // Prevent the viewport being scrolled by the focus if (carousel.viewport) { carousel.viewport.scrollLeft = 0 } carousel.nav.slideTo(currentIndex.value) }
This onFocusin handler is triggered by click events as well, causing an unintended and jarring scroll right before page navigation. This results in poor UX, especially when using the carousel to display product cards with links or buttons.

To Reproduce
Use to render clickable components (e.g. ) inside a carousel.

Include a button or image inside the card that navigates to another route/page.

Click the button/image.

Observe the slide scrolls before the navigation occurs.

Expected behavior
The carousel should not automatically scroll the focused slide into view when a user clicks an interactive element that leads to navigation. This behavior should be optional, configurable via a prop like autoScrollOnFocus: false.

Workaround
I had to manually stop propagation of the focus event like this:
<Slide v-for="(product, index) in props.data" :key="product.id"> <ProductCard @focusin="(e) => e.stopPropagation()" :product="product" /> </Slide>

this issue is seen on all on all platforms with the latest version of the package to this date which is v.0.15.1