data-headlessui-state on MenuItem

[JarvisH]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.16

What browser are you using?

Chrome

Reproduction URL
See official example here: https://headlessui.com/vue/menu where it is not working.
Codesandbox: https://codesandbox.io/p/sandbox/interesting-hypatia-sjvd9z?file=%2Fsrc%2FApp.vue%3A4%2C23

Describe your issue

According to the section "Using data attributes" https://headlessui.com/vue/menu#using-data-attributes, <MenuItem /> should render with data-headlessui-state="active" when active. It does not.

From the documentation:

<!-- Rendered `MenuItems` -->
<ul data-headlessui-state="open">
  <li data-headlessui-state="">Account settings</li>
  <li data-headlessui-state="active">Support</li>
  <li data-headlessui-state="">License</li>
</ul>

[JarvisH]

I discovered this only works when rendering <MenuItem> via as="someElement".

<!-- Works -->
<MenuItem as="button">Test</MenuItem>

<!-- Does not work -->
<MenuItem><button>Test</button></MenuItem>

Codesandbox: https://codesandbox.io/p/sandbox/interesting-hypatia-sjvd9z?file=%2Fsrc%2FApp.vue%3A4%2C23

[JarvisH]

Is this a duplicate of #2787 ?

[RobinMalfait]

Hey!

Yep that's a duplicate of #2787, you can use the latest insiders version and this problem should go away:

npm install @headlessui/vue@insiders

Hope that helps!