Skip to content

[select] Select with long list auto selects when using touchpad and the list goes over and above the Select #48956

Description

@jominyu-cksc

Steps to reproduce

Steps:

  1. Open this link to live example: https://stackblitz.com/edit/github-tnqxhhh1?file=src%2FApp.tsx
  2. Use the touchpad and click Age Select
  3. The Select list will automatically close as it auto selects the item over the cursor

Current behavior

The Select list will automatically close when clicked via the touch pad as it auto selects the item over the cursor. This only happens when the list is long so it's scrollable and the list went over and above the Select, thus in the example link there are extra text and margins above the Select. The second time you click Select via the touchpad, the list will not close because the item selected is already the one where the cursor is. But if you select another then click the Select again it auto selects again.

Note that using the mouse or finger/touch in phones do not produce the bug. It only happens in touchpad.

Expected behavior

The Select list should not automatically close selecting the item over the cursor just like when using the mouse or finger/touch in phones or tablets.

Context

The original intuitive behavior of Select prior to MUI version 9.1 to 9.3 is desired. Thus my project is stuck at 9.0.0 where Select worked fine.

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used: tested in Chrome, Edge and Firefox.
  Output from `npx @mui/envinfo` goes here.

  System:
    OS: Windows 11 10.0.26200
  Binaries:
    Node: 22.12.0 - D:\nodejs\node.EXE
    npm: 11.0.0 - D:\Test\node_modules\.bin\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 151.0.7922.109
    Edge: Chromium (151.0.4129.78)
    Firefox: 153.0.1 - C:\Program Files\Mozilla Firefox\firefox.exe
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0
    @emotion/styled: ^11.14.1 => 11.14.1
    @mui/core-downloads-tracker:  9.1.1
    @mui/icons-material: ^9.0.0 => 9.0.0
    @mui/material: ^9.0.0 => 9.0.0
    @mui/private-theming:  9.1.1
    @mui/styled-engine:  9.1.1
    @mui/system:  9.1.1
    @mui/types:  9.1.1
    @mui/utils:  9.1.1
    @types/react: ^19.2.18 => 19.2.18
    react: ^19.2.8 => 19.2.8
    react-dom: ^19.2.8 => 19.2.8
    typescript: ^7.0.2 => 7.0.2

Search keywords: Select, touchpad

Metadata

Metadata

Assignees

No one assigned

    Labels

    scope: selectChanges related to the select.type: bugIt doesn't behave as expected.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions