Select doesen't work inside a Carousel List

[major-mayer]

Overview of the problem

Buefy version: 0.9.3
Vuejs version: 2.6.12
OS/Browser: Firefox

Description

Steps to reproduce

1. Add a b-select component inside the slot of a b-carousel list like this:

<template>
  <b-carousel-list :data="items">
    <template v-slot:item>
      <b-select v-model="model">
        <option>History</option>
        <option>Uploaded</option>
      </b-select>
    </template>
  </b-carousel-list>
</template>

<script>
export default {
  data() {
    return {
      items: [{ name: "test1" }, { name: "test2" }, { name: "test3" }],
      model: undefined,
    };
  },
};
</script>

2. Click on the created select component

Expected behavior

The select dropdown menu opens

Actual behavior

Nothing happens. I don't know at which point the click/ change event is blocked, but it doesn't reach the select component.
Using a standard select tag shows the same problem.
Placing the b-select outside of the b-carousel-list slot works just fine.

[service-paradis]

I think @Tofandel fixed a similar issue for the Carousel component. Looks like the dragging events take priority over click events.

[major-mayer]

Thanks for handling this.
I need to place the select element inside the carousel list, because i want to position it relative to the carousel slides.
So this bug is quite important for me, because i'm not aware of any workaround to archive this.

[Tofandel]

There is a bug with the piece of code, it only takes into account elements without text in them, I'll remove the condition

[major-mayer]

Thanks for the quick fix, great work 🙂 👍

[major-mayer]

Hmm I just updated to Buefy 0.9.4 and at least for me this still doesn't work.
Could it be the case that the fix was only affecting the Carousel component and not the Carousel-List as described in my issue?

Anyway, I will use the Dropdown component instead of the select as a workaround for now, because this one seems to work even inside a Carousel List

[Tofandel]

@major-mayer Correct, the bug was on the carousel component, the carousel list doesn't support inner elements, the workaround would be to stop propagation of the mousedown event or to apply the same logic to both the carousel and carousel list

[alexd73]

Adding @mousedown.native.stop was help me

      <b-select
        v-model="model"
        select
        aria-role="list"
        @mousedown.native.stop
      >