[menu] How can the `Popover` be rendered over a disabled `Menu.Item`?
- 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 |
|--------|--------|
| |
|
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
Assessment
This issue has not been assessed yet.