mui / mui/base-ui

[menu] How can the `Popover` be rendered over a disabled `Menu.Item`?

Open
#2,693 3 comments 0 reactions 0 assignees View on GitHub
component: menu support: question
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Get help

## Question
What is a recommended method to handle rendering of the `Popover` over a disabled `Menu.Item`? (including the `Item` sub-types like the [CheckboxItem](https://base-ui.com/react/components/menu#checkbox-item).

## Issue
I need to render a `Menu`, where the first item appears as "disabled" with a `Popover` explaining the reason for it. The popover should appear both on click and hover.

| Menu | Popover |
|--------|--------|
| Image | Image |

With the following layout, the popover appears on click, _but not on Spacebar press_:
```tsx
{addToLibraryItem}}
/>
```
IIUC, that happens because when the menu is opened with the keyboard, focus lands on the inner menu item. The latter _isn't the trigger_ for the `Popover`.

## Demo
https://codesandbox.io/p/sandbox/popover-over-disabled-menu-item-r7k9fh

## Relations
I believe that the https://github.com/mui/base-ui/issues/2143 is related. There, @KingSora asked how the initial focus can be placed not on the menu item button, but simply on the 1st element.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.