handleCaretClick does not work on custom caret

[antpngl92]

Version

• Vue: 3.2.37
• multiselect: 2.5.8
• nuxt: 3.0.0

Description

When I try to use custom caret the handleCaretClick does not work.

    <template #caret>
        <span
          aria-hidden="true"
          @click="handleCaretClick"
        >
          <nuxt-icon
            :name="`arrow_down${isSortBy() ? '_small' : ''}`"
            :class="[
              {'dropdown-single-select__icon--up': multiselect?.isOpen}
            ]"
          />
        </span>
      </template>

<script setup lang="ts">
const multiselect = ref<MultiselectRef>();
const handleCaretClick = ref();

onMounted(() => {
  handleCaretClick.value = (multiselect.value as any)?.handleCaretClick
});
</script>

It opens and closes the options list immediately. If I hold the button (mouseDown) the list stays open, as soon as I release it (mouseUp) the list closes.

[adamberecz]

The default caret has pointer-events: none when the dropdown is closed. In the upcoming release handleCaretClick and isOpen params are added to the slot's scope. If you want to replicate the same behaviour, you can do:

<template #caret="{ handleCaretClick, isOpen }">
  <span
    aria-hidden="true"
    @click="handleCaretClick"
    :style="{
      pointerEvents: isOpen ? 'auto' : 'none'
    }"
  >
    x
  </span>
</template>