Command palette close button event propagation stop missing

chris-si commented 3 months ago

Environment

Operating System: Darwin
Node Version: v20.12.2
Nuxt Version: 3.12.4
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: npm@10.6.0
Builder: -
User Config: srcDir, ssr, devServer, app, router, future, build, vite, nitro, modules, runtimeConfig, typescript, piniaPersistedstate, ui, turnstile, devtools, compatibilityDate
Runtime Modules: @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.1, @vee-validate/nuxt@4.13.2, @vueuse/nuxt@10.11.0, @nuxt/ui@2.17.0, @nuxt/scripts@0.6.4, @nuxtjs/turnstile@0.9.3
Build Modules: -

Version

v2.17.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-avai3t?file=components%2FMyCommandPalette.vue

Description

Hi,

I have a problem with the close button of the command palette. When nullable = false and autoselect = true are set and the close button is being clicked, the auto selected command gets triggered together with the close button event.

The reproduction shows the described behavior, that if the close button gets clicked, a command event will also be triggered.

My guess is that a .stop on the @click event in line 24 of CommandPalette.vue might mitigate this behavior if I'm not mistaken.

Additional context

No response

Logs

No response

benjamincanac commented 3 months ago

Duplicate #1708. The SelectMenu and CommandPalette both use Headless UI Combobox component underneath.

benjamincanac commented 3 months ago

The only workaround I can provide at the moment is to set the multiple prop alongside model-value="[]":

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen">
      <UCommandPalette
        :model-value="[]"
        multiple
        :close-button="{
          icon: 'i-heroicons-x-mark-20-solid',
          color: 'gray',
          variant: 'link',
          padded: false,
        }"
        :groups="[{ key: 'people', commands: people }]"
        @update:model-value="onCommandSelect"
        @close="() => (isOpen = false)"
      />
    </UModal>
  </div>
</template>

nuxt / ui