[Bug]: Dialog/TransitionRoot does not animate when launched from inside `MenuItem`

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.1.0

What browser are you using?

Chromium

Reproduction repository

https://youtu.be/oMOIPmf_ij0

Describe your issue

I’m using a Menu to launch this slideout. I’m using the same function between buttons. The slideout doesn’t animate when from inside a MenuItem component, but does with a regular button.

This doesn’t animate

<MenuItem v-slot="{ active }">
  <button
    :class="[
      active ? 'bg-fuchsia-500 dark:bg-fuchsia-600 text-white' : 'text-gray-900 dark:text-gray-100',
      'group flex rounded-md items-center w-full px-2 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-300 dark:focus:ring-gray-500',
    ]"
    @click.prevent="togglePermissions(user)"
  >
    Permissions
  </button>
</MenuItem>

This does

<button @click="togglePermissions(users.data[0])">
  Click
</button>

Sorry about the lack of repo, hopefully the video is enough to go off of. Both the dropdown and menu were lifted straight from the example.

[hfalucas]

I solved it by making the button the parent element. Still can’t really understand why it solved the problem.

<button @click.prevent="togglePermissions(user)">
    <MenuItem v-slot="{ active }">
        <span :class="[ active ? '...' : '...']"> Permissions</span>
    </MenuItem>
</button>

[andreassoegaard]

This bugged me for several hours - tried to follow all the suggestions here and @RobinMalfait’s great example - but nothing seemed to help.

So for anyone in the same boat:

When opening slideovers/popups etc., the first focusable element is automatically focused by the Dialog component.

When I removed all focusable elements inside the Slideover, the animation worked again. I think there is an initialFocus setting on the Dialog component to control this - but I didn’t have luck using it. And I don’t know why the focused element in this way cancels the animation.

Since I needed my focusable elements and couldn’t just remove them (checkboxes in this case), I put a v-if=“mounted” on them:

...
<input v-if="mounted" type="checkbox" />
...

import { ref } from 'vue'

const mounted = ref(false)
onMounted(() => { mounted.value = true })

Might be a bit of a hack - but now my slideover is animating both in and out, and I’m happy.

Hope it can help someone!