Click event is trigged when a b-carousel-list is dragged

[Krash0]

Overview of the problem

Buefy version: [0.1.3] Vuejs version: [3.4.24] OS/Browser: Windows/Chrome 124.0.6367.61

Description

When using the b-carousel-list component that has an element that contains an @click event, the @click event is called when dragging

I wasn't able to get vue 3 + buefy on CodePen, but you can see sample code here: https://pastebin.com/MyD8yYiA

Steps to reproduce

1. Add a b-carousel-list component
2. Add an element with an @click event
3. Drag the carousel and out the mouse button on the element with the @click event

Expected behavior

The @click event should not be triggered

Actual behavior

@click event is triggered even after dragging

[wesdevpro]

Can you please send me your code for reproducing this?

[Krash0]

Can you please send me your code for reproducing this?

In the post there is the pastebin link with the problematic code, do you want a complete example project?

[wesdevpro]

Can you please send me your code for reproducing this?

In the post there is the pastebin link with the problematic code, do you want a complete example project?

I completely overlooked your pastebin link😅. Thank you

<template>
    <section class="section">
        <div class="container is-fluid is-clipped">
            <b-carousel-list v-model="values" :data="elements" :repeat="true" :items-to-show="3">
                <template #item="element">
                    <div class="card is-shadowless is-clipped">
                        <div class="card-image">
                            <figure class="image is-square">
                                <a @click="test()"><img :src="element.image" /></a>
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="content">
                                <p>{{ element.title }}</p>
                            </div>
                        </div>
                    </div>
                </template>
            </b-carousel-list>
        </div>
    </section>
</template>

<script>

export default {
    data: () => ({
        values: 0,
        elements: [
            {
                title: "Element 1",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 2",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 3",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 4",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 5",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 6",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 7",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 8",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 9",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 10",
                image: "https://via.placeholder.com/500x500"
            }
        ]
    }),
    methods: {
        test() {
            alert("clicked");
        },
    }
};
</script>

[Krash0]

I was able to reproduce the behavior that would be standard by using the @mousedown and @mouseup events and then comparing the mouse positions.

While the real cause of the problem is not discovered, this seems to work well:

<template>
    <section class="section">
        <div class="container is-fluid is-clipped">
            <b-carousel-list v-model="values" :data="elements" :repeat="true" :items-to-show="3">
                <template #item="element">
                    <div class="card is-shadowless is-clipped">
                        <div class="card-image">
                            <figure class="image is-square">
                                <a @mousedown="onMouseDown($event)" @mouseup="onMouseUp($event, element)"><img :src="element.image" /></a>
                            </figure>
                        </div>
                        <div class="card-content">
                            <div class="content">
                                <p>{{ element.title }}</p>
                            </div>
                        </div>
                    </div>
                </template>
            </b-carousel-list>
        </div>
    </section>
</template>

<script>
export default {
    data: () => ({
        values: 0,
        elements: [
            {
                title: "Element 1",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 2",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 3",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 4",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 5",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 6",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 7",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 8",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 9",
                image: "https://via.placeholder.com/500x500"
            },
            {
                title: "Element 10",
                image: "https://via.placeholder.com/500x500"
            }
        ],
        mousePosition: {
            x: 0,
            y: 0
        }
    }),
    methods: {
        onMouseDown(event) {
            this.mousePosition.x = event.pageX;
            this.mousePosition.y = event.pageY;
        },
        onMouseUp(event, element) {
            if (Math.abs(event.pageX - this.mousePosition.x) < 5 && Math.abs(event.pageY == this.mousePosition.y) < 5) {
                this.onClick(element);
            }
        },
        onClick(element) {
            console.log(element);
            alert("clicked");
        }
    }
};
</script>