Tooltip on disabled options in Material UI Autocomplete

Tooltip on disabled options. Easy peasy, right? But no.

If you are using renderOption, and want all disabled options to have a tooltip, for telling the user, why it is disabled, the tooltip doesn’t want to show up, even though you are using Tooltip exact the same way as you always do.

And there is a reason for that.

If you inspect the disabled option, you can see the <li> element for disabled options, is set to pointer-events: none

This is what pointer-events: none does, it makes the element unclickable.

Sadly, what causes the issue — is it prevents mouse hover as well! Aha!

So while we are waiting on a solution in material UI, there is a workaround to solve this, with a few lines of CSS.

I have created a sandbox for this so that you can see it in action

And the solution;

.MuiAutocomplete-listbox li[aria-disabled="true"] {
  pointer-events: inherit !important;
}
.MuiAutocomplete-listbox li[aria-disabled="true"]:hover, .MuiAutocomplete-listbox li[aria-disabled="true"]:focus {
  background: white !important;
}
.MuiAutocomplete-listbox li[aria-disabled="true"]:active {
  background: white !important;
  pointer-events: none !important;
}

… !important might not be needed in your case. Also be aware, that it could be .MuiAutocomplete-popper etc.

Hope this solved the issue, while we are waiting for a solution