mui / mui/material-ui

[Select] De-Selecting causes multiple select to jump to top

Open
#37,895 3 comments 7 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Duplicates
  • I have searched the existing issues
Latest version
  • I have tested the latest version
Steps to reproduce 🕹

Link to live example:
This happens on the official MUI Website (as of 10. July 2023):
https://mui.com/material-ui/react-select/
(or alternatively, stackblitz: https://stackblitz.com/edit/react-gtavad?file=demo.tsx)

Steps:

  1. Go to the official MUI Website: https://mui.com/material-ui/react-select/
  2. Scroll down to "Multiple select"
  3. In the "Default" Example, click on "Name", scroll to the very bottom of the popup
  4. Click and Select "Kelly Snyder"
  5. Deselect "Kelly Snyder"

Gif:
chrome_e5IlyPWFdF

Current behavior 😯

The scrolling position of the popup will jump to the top of the Select popup.

If more than one item was selected and one item gets deselected, the scroll will not jump to the very top, but will focus one of the other selected items instead.

Expected behavior 🤔

The scrolling position of the popup should stay where it is.

Context 🔦

I want to be able to deselect something in a Select Component with the multiple prop, without the scrolling position of the popup jumping around.

There was a very similar issue back in 2021:
https://github.com/mui/material-ui/issues/19245

Some other issue:
This behaviour can be circumvented as described here:
https://stackoverflow.com/questions/72955537/material-ui-select-jumps-to-the-top-of-the-page

But this will break other things:
-) Keyboard not working properly anymore
-) When opening the selection and there are already things selected, the popup should already focus on those things, not start at the very top, but this will be broken with the workaround.

Your environment 🌎
npx @mui/envinfo
  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.8.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.67)
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5
    @emotion/styled: ^11.10.5 => 11.10.5
    @mui/base:  5.0.0-alpha.114
    @mui/core-downloads-tracker:  5.11.5
    @mui/icons-material: ^5.10.9 => 5.11.0
    @mui/lab: ^5.0.0-alpha.106 => 5.0.0-alpha.116
    @mui/material: ^5.10.12 => 5.11.5
    @mui/private-theming:  5.11.2
    @mui/styled-engine:  5.11.0
    @mui/styles: ^5.10.10 => 5.11.2
    @mui/system:  5.11.5
    @mui/types:  7.2.3
    @mui/utils:  5.13.1
    @mui/x-data-grid: ^5.17.10 => 5.17.26
    @mui/x-date-pickers: ^5.0.7 => 5.0.14
    @types/react: ^18.0.24 => 18.0.26
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^4.9.5 => 4.9.5

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.

Research direction

Reproduce the issue in the official Select documentation's Multiple select Default example, or the linked StackBlitz demo, using the listed steps. Investigate the multiple-select deselection behavior and verify that removing an item preserves the popup's scroll position while retaining correct keyboard focus and initial selection focus.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.