question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Select] How to hide the popup on scroll?

See original GitHub issue
  • 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

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
ajjack50ncommented, May 4, 2022

I note this issue has been open for some time and labelled an enhancement. In the meantime, is there a work-around to close the drop down on scroll?

1reaction
DavidVonAmricommented, Feb 14, 2021

Okey, but I’m guessing all of the components using the “popup box” has the same issue as described. Like Menu, Date/Time and so on?

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Select] How to hide the popup on scroll? #24928 - GitHub
Open one of the selectboxes and scroll the page. Scrolling is NOT allowed and the selectbox stays open. Visit https://material-ui.com/components ...
Read more >
Disable scrolling while popup active - Stack Overflow
A simple answer, which you could use and would not require you to stop the scroll event would be to set the position...
Read more >
DropDownList / How To / Close the popup on scroll - Syncfusion
By using the hidePopup method in DropDownList, you can close the popup on scroll when triggered the windows scroll event.
Read more >
Hide popups when the user scrolls away with React
For handling the 'click away' event, we are going to use a component from MaterialUI: ClickAwayListener. We will modify our popup so that...
Read more >
Popup - How to hide the widget when scrolling a window
Hi, How can I hide a popup on scroll similar to how your edit controls (date-box, select-box, etc) work when you scroll with...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found