Vue Menu Items are disabled

[Kagigz]

Hi,

I'm using sample code to add a Menu Button with Menu Items appearing in a dropdown when clicking it (cf image)

This is the sample code I'm using:

<Menu as="div" class="relative ml-5 flex-shrink-0">
    <div>
      <MenuButton class="flex rounded-full bg-white focus:outline-none focus:ring-2 focus:ring-redorange-500 focus:ring-offset-2">
        <span class="sr-only">Open user menu</span>
        <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
      </MenuButton>
    </div>
    <transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
      <MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
        <MenuItem v-for="item in userNavigation" :key="item.name" v-slot="{ active }">
          <a :href="item.href" class="block py-2 px-4 text-sm text-gray-700" :class="[active ? 'bg-gray-100' : '']">{{ item.name }}</a>
        </MenuItem>
      </MenuItems>
    </transition>
</Menu>

I don't understand why, but all the items appear as disabled.
When inspecting the code generated, I see that tags are generated with a disabled="false" attribute. I'm wondering if there isn't an issue with the component itself considering the "false" value as a string and not a boolean (hence the "true" value).

Would appreciate some help - thanks!

[adamwathan]

Hey! Can you create a proper reproduction we can look at and play with? Much higher changes of us finding the time to help if we don't have to take the time to create a project from scratch and set everything up ourselves 👍

[ignium559]

@Kagigz This appears to have been fixed in 1.7.8 (#2138)