Feature: Disabled Menu Item

[mikeerickson]

Back for another UI question / feature

I am looking to disable menu items. When creating menus on macOS or Windows, one would do something like the following to define a disabled menuItem (see the left bracket at the end of the name property. Then apply a gray color as the menu item text.

{
  name: "New Contact(",
  slug: "new-contact",
},
{
  name: "New Company",
  slug: "new-company",
},

Or, if you want to be a bit more expressive, add a disabled property to menu definition object

{
  name: "New Contact",
  slug: "new-contact",
  disabled: true
},
{
  name: "New Company",
  slug: "new-company",
},

Now, much like you have done with the separator capability (thank you) when "selecting" a menuItem that is disabled, nothing should happen

[johndatserakis]

Hey Mike,

Ok I see what you're looking for here - and I think there's kinda already a pretty simple way for you to accomplish this - not sure if it's really worth adding as a new parameter. Let me know what you think.

What you can do now is use the class property option on the option you'd like disabled. Something like this:

{
  name: "New Contact",
  slug: "new-contact",
  class: "disabled-option"
},
{
  name: "New Company",
  slug: "new-company",
}

And then in your CSS have:

.disabled-option {
  color: #eee;
  pointer-events: none;
}

Now the user will not be able to click that option, and by adjusting the color it will appear greyed out. Does that solve it?

[mikeerickson]

Hey John

This is totally acceptable to me 👍

I was not aware of the class property

[mikeerickson]

Hey John

I have tried this and it works as expected. However, if I add the class to the component scoped style which shows the menu, it does not work correctly. If I move the display class to global css, it works.

Not a big deal as I have a working solution, but figured I would pass it along :-)