[Bug]: Slot in PopoverButton

[4350pChris]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v.1.1.1

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/headlessuivue-menu-example-forked-268dv

Describe your issue

I was hoping to use the popover component as a wrapper for a type of menu where the trigger button can be anything but the rest of the popover is always the same, which led me to using a slot as the PopoverButton's child.
Since I want to keep the elements the same as before I tried rendering the button as a template, with the intention of the slot content being used instead.
However, as you can see from the code box example, rendering a PopoverButton as a Template doesn't work.

What's the recommended approach here? Maybe pass in the component as a prop, then use :as="mycomponent" on the PopoverButton?

[livthomas]

I'm facing exactly the same problem with MenuButton component. Using :as="MyButton" doesn't work either because MyButton is more complex and I need to be able to access its slot props inside its default slot. And even if that worked (which it doesn't), it would still be quite cumbersome to pass all necessary props to MyButton. This is because MyMenu component where MenuButton is used is a generic reusable UI component and there can multiple component with wide variety of props used instead of MyButton. So making the slot work would definitely be the best solution.

I assume both PopoverButton and MenuButton components are implemented the same way, that's why I'm mentioning it here.

[livthomas]

I found a simple workaround with span element:

    <MenuButton as="span">
      <slot name="button">
        <MyButton>{{ buttonText }}</MyButton>
      </slot>
    </MenuButton>

However, it has some negative consequences. For example, the button is not focused after the menu is closed. But otherwise, it works pretty well.

[4350pChris]

While this does work it still introduces an extra element into the page flow, which is not ideal in my case.

[nekitk]

As a workaround I put MenuButton inside trigger slot:

<template>
  <Menu>
    <slot name="trigger">
      <MenuButton as="template">
        <button>Default trigger</button>
      </MenuButton>
    </slot>
    <MenuItems>
      <!-- ... -->
    </MenuItems>
  </Menu>
</template>

So to add custom trigger I need to wrap it in headlessui's MenuButton component:

<Dropdown :items="items">
  <template #trigger>
    <MenuButton as="template">
      <MyButton>
        Custom trigger via slot
      </MyButton>
    </MenuButton>
  </template>
</Dropdown>

That way I have no additional wrappers and correct aria-labels on custom button.
It would be more convenient to put just a button inside slot but it doesn't seem possible for now.

[thecrypticace]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed by #1548, and will be available in the next release.

You can already try it using npm install @headlessui/vue@insiders.