Vue-carousel: Bug: Slides with inputs lose focus immediately when clicked

[okmkey45]

Hello

I tried this carousel and I think it´s great. It´s easy and nice to use.

But I wanted to use it with some form components and other elements different that only images. When I click on the inputs, they just lose focus immediately. I don´t want to think that this component is only mean to use for images. It could be good idea that any component could be used.

Well, if you have a solution for my situation, I would really thank you.

Again, nice component

[runxc1]

Did you ever find a solution for this? I am running into the same issue

[ghobaty]

Facing the same problem.

[runxc1]

I ended up having to do put a @click="$event.target.focus()" to get the input to focus. The issue is due to how it is capturing mouse up/down for scrolling on mobile I believe

[okmkey45]

@runxc1 Yes, I did find a solution but I have to say, not a good one. Still, for my app it works fine and solves my problem.

The problem that I found is that this component in the mounted stage adds listeners to handle mousedown, mouseup and mousemove events. If you want, check the code in here lines 453-461.

So what I did for my app (again, not the best solution) is that I created a new vue component that extends from this vue carousel and removed this listeners. After doing this, I no longer had the problem for my inputs losing focus.

I share with you my code and I hope it works for you. Or perhaps you find a better solution (Here in my country, we call this "Machete" lol)

<script>
import { Carousel } from 'vue-carousel';

export default {
    extends: Carousel,
    mounted () {
        if ("ontouchstart" in window) {
            this.$el.removeEventListener("touchstart", this.handleMousedown)
            this.$el.removeEventListener("touchend", this.handleMouseup)
            this.$el.removeEventListener("touchmove", this.handleMousemove)
        } else {
            this.$el.removeEventListener("mousemove", this.handleMousemove)
            this.$el.removeEventListener("mousedown", this.handleMousedown)
            this.$el.removeEventListener("mouseup", this.handleMouseup)
        }
    }
}
</script>

[runxc1]

Very interesting, I hadn't seen a Vue component extended before. Seems this would disable being able to finger scroll through the items in the component which isn't too bad. Seems that the mousedown should only call preventDefault if the element clicked or touched isn't an input element. I'll have to look at this later. Thanks for the example

[quinnlangille]

Hey guys, sorry for the late reply on this. I'm going to flag this as an official bug, and hope it will get fixed in the next patch. it's likely that though the slider was meant for more than images, forms were an edge case that was never tested. Thanks for the input!

[askdesigners]

Any progress on this one in a recent release?

[quinnlangille]

Hey @askdesigners, no progress yet - however, this will be directly related (and hopefully resolved by) to #172. There's some traction on that thread, and the feature is officially in our roadmap for v1.0.

That being said, we're looking for a contributor to make the feature, so feel free to submit something if you come up with a solution in your own :~)