adobe / adobe/react-spectrum

Menu/Select pick immediately when Popover overlaps its Trigger

Open
#3,864 11 comments 5 reactions 0 assignees View on GitHub
bug
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

![Kapture 2022-12-20 at 09 46 39](https://user-images.githubusercontent.com/985701/208623595-8e2a8b10-ca88-44f3-916f-28018eaf76d3.gif)

## 💁 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

    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.