Adding disabled prop to <component> within MenuItem inside a <Menu> not working

[JshGrn]

I believe this is actually a bug so I am transitioning it to a issue unless I have missed something in the docs.

Discussed in #2920

^{Originally posted by JshGrn January 9, 2024}
If I add 'disabled' to the MenuItem then it adds the aria-disabled prop, however I want to mark the within the as disabled, outputting "disabled" inline, however this doesnt work. It looks like its removed or set by default to false?

Have read the closed issues and can't see anyone reporting the same issue.

A very simplified markup:

<Menu as="div">
   <MenuButton>test</MenuButton>
      <MenuItems>
         <MenuItem
            v-for="menuItem in items"
            :key="menuItem.href"
            :href="menuItem.href"
            v-slot="{ active }"
            disabled
         >
            <component is="button" disabled>disabled button</component>
         </MenuItem>
   </MenuItems>
</Menu>

I am expecting <button disabled>disabled button</button>

[JshGrn]

AWESOME thanks!

[thecrypticace]

Hey — I've merged the fix for this in #2929 and it'll be in the next patch release of @headlessui/vue. In the meantime you can use it via our insiders build which should be ready in a few minutes:

npm install @headlessui/vue@insiders

[JshGrn]

Yeah I saw the email come through and that's awesome as I can remove my workaround 😄 Thanks for sorting!