mui / mui/material-ui

[Select] How to hide the popup on scroll?

Open
#24,928 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When the Select component is open scrolling is disabled. This works on desktop but not on mobile (ios). So when scrolling the page the selectbox stays open and does not move along with the scrolled content.

Expected Behavior 🤔

It would be really nice if the Select used more of the native select features. Instead of disabling the scroll of the body the open selectbox should be closed when scrolling. On mobile, if not closing the selectbox when scrolling the body, it should at least move along with the content.

Steps to Reproduce 🕹

Steps:

  1. Visit https://material-ui.com/components/selects/ on computer.
  2. Open one of the selectboxes and scroll the page. Scrolling is NOT allowed and the selectbox stays open.
  3. Visit https://material-ui.com/components/selects/ on iOS device.
  4. Open one of the selectboxes and scroll the page. Scrolling IS allowed and the selectbox stays open but does not move along with the content.

Context 🔦

I feel like this is an unfinished component in that sense that as a user I'm not expecting this behavior to occur, either on desktop or mobile.

Your Environment 🌎

`npx @material-ui/envinfo`
  System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 14.15.4 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 7.5.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 88.0.4324.150
    iOS Safari: 12.4.8
  npmPackages:
    @material-ui/core: ^4.11.3 => 4.11.3
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/styles:  4.11.3
    @material-ui/system:  4.11.3
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react:  17.0.1
    react: ^16.0.0 => 16.12.0
    react-dom: ^16.0.0 => 16.12.0
    typescript: ^3.7.5 => 3.7.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

The issue points to the Select component and the Selects demo at material-ui.com/components/selects/; begin by reproducing the scrolling behavior on desktop and iOS Safari. Done means the open popup follows the agreed native-select behavior during page scrolling, with both desktop and iOS cases verified.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.