dropdown not hide after click if use "to" prop for item

[aloky]

Environment

Nuxt 3.7.4 with Nitro 2.7.2

Version

v2.10.0

Reproduction

Not have

Description

Dropdown not hide after click, if use in header dropdown with links dropdown not hide after click

Additional context

No response

Logs

No response

[flozdra]

Hi,

I have the same issue with reproduction here: https://stackblitz.com/edit/nuxt-ui-eomajj?file=app.vue

I'm not sure where the issue comes from. As soon as the NuxtLink (or RouterLink) is in the HMenuItem, the @click event is not triggered :

<NuxtLink to="/" @click="console.log('click')">
  Trigger the click event
</NuxtLink>

<HMenuItem>
  <NuxtLink to="/" @click="console.log('click')">
    Doesn't trigger the click event
  </NuxtLink>
</HMenuItem>

I think this is related to this issue: tailwindlabs/headlessui#143 (comment)

The only workaround I found is to wrap the HMenuItem in NuxtLink with the custom prop, and manually close the dropdown, as suggested in the previous issue.

<NuxtLink v-slot="{ href, navigate }" to="/" custom>
    <HMenuItem v-slot="{ close }">
        <a :href="href" @click.prevent="[navigate(), close()]">...</a>
    </HMenuItem>
</NuxtLink>

[narr07]

same issue, dropdown not closed after click menu in mobile nav menu. what the solution for this?

[flozdra]

@narr07 For now as a workaround I use the function to navigate: click : () => navigateTo('/profile')

[benjamincanac]

@flozdra Thanks! I've implemented your suggestion and it seems to finally fix the issue 😊