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

Open
#48,956 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
55/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the linked StackBlitz reproduction in src/App.tsx and compare opening the Age Select with a touchpad against a mouse or touch input. Trace the Select interaction that closes and selects the item under the cursor when the list is long and extends above the control. Done means the list stays open without changing the selection in the touchpad case, while the existing mouse and touch behavior remains intact.

Written by the indexing model from the issue text.

Description

scope: select type: bug
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

Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mui/material-ui

All issues in mui/material-ui

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.