Menu/Select pick immediately when Popover overlaps its Trigger
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🐛 Bug Report
When there is not enough space for the popover to be placed above/below its trigger, it will overlap the trigger. This causes the popover to be immediately closed and whatever item is underneath the pointer will be selected.
## 🤔 Expected Behavior
Items should not automatically be selected.
## 😯 Current Behavior

## 💁 Possible Solution
The issue is caused by conflicting event handlers. The popover opens on `onPointerDown` and the selection event for both, the menu and select (listbox), happens on `onPointerUp`. One possible solution might be to move the selection to another event, e.g. `onPointerDown`.
**A temporary fix is the following:**
```js
let { menuItemProps } = useMenuItem(
{ key: item.key },
state,
ref
);
let { onPointerUp, ...rest } = menuItemProps;
return (
{item.rendered}
{isSelected && ✅}
);
```
## 💻 Code Sample
**Codesandbox Playground:** https://codesandbox.io/s/shy-paper-fi7w0f?file=/src/App.js
To see the behavior, reduce the size of the browser.
## 🌍 Your Environment
| Software | Version(s) |
| ---------------- | ---------- |
| react-aria | 3.22 |
| react-stately | 3.20 |
| Browser | Chrome 108.0.5359.124
| Operating System | MacOS Ventura 13.0.1
Contributor guide
Assessment
This issue has not been assessed yet.