Skip to content

Select: Accidental value selection on input click when menu overflows #46675

@oyvinvo

Description

@oyvinvo

Steps to reproduce

Steps:

  1. Open this link to live example: https://mui.com/material-ui/react-select/#basic-select
  2. Make the viewport short enough for Menu to be displayed over the input
  3. Click the input with mouse
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    duplicateThis issue or pull request already exists.scope: selectChanges related to the select.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions