-
-
Notifications
You must be signed in to change notification settings - Fork 32.8k
Description
Steps to reproduce
Steps:
- Open this link to live example: https://mui.com/material-ui/react-select/#basic-select
- Make the viewport short enough for Menu to be displayed over the input
- Click the input with mouse
- If value in the menu is displayed under the cursor it's selected and menu is closed.
Current behavior
Instead of the expected behavior where clicking the Select input simply opens the dropdown menu, the bug causes an immediate, unintended selection.
When the Select menu is large enough to overflow and open directly over the input, clicking on the input registers as a click on the menu item that is visually positioned underneath the cursor. This immediately selects that value and closes the menu, preventing the user from viewing the full list of options and making a deliberate choice.
Expected behavior
The expected behavior is that clicking the Select input should always open the dropdown menu, regardless of the menu's size or position relative to the input. No value should be selected until the user deliberately clicks on an item within the opened menu. The menu should remain open, allowing the user to scroll through and select from all available options.
Context
No response
Your environment
npx @mui/envinfo
System:
OS: Linux 6.8 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
Binaries:
Node: 20.9.0 - /opt/node/bin/node
npm: 10.1.0 - /opt/node/bin/npm
pnpm: Not Found
Browsers:
Chrome: 137.0.7151.119
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.1 => 11.14.1
@mui/core-downloads-tracker: 7.3.0
@mui/icons-material: ^7.3.0 => 7.3.0
@mui/material: ^7.3.0 => 7.3.0
@mui/private-theming: 7.3.0
@mui/styled-engine: 7.3.0
@mui/styles: 6.5.0 => 6.5.0
@mui/system: ^7.3.0 => 7.3.0
@mui/types: 7.4.5
@mui/utils: ^7.3.0 => 7.3.0
@types/react: 18.2.31
react: ^19.1.1 => 19.1.1
react-dom: ^19.1.1 => 19.1.1
typescript: 5.2.2
Search keywords: Select, Menu, Click, Overflow