[Select] How to hide the popup on scroll?

[DavidVonAmri]

• [x] The issue is present in the latest release.
• [x] 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 ```

[DavidVonAmri]

I'm also a bit confused why I'm not able to open a Select while another is already open. In essence I have to double click to open another Select if one is already open. One click to close the open one, and one click to select the other. Does not feel intuitive at all. Again the native select has a nice user experience.

[oliviertassinari]

@DavidVonAmri We recommend using the native select anytime possible

[DavidVonAmri]

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?

[DavidVonAmri]

Perhaps it would be possible to take a look at the Popover element and not just the Select.

Ideally it would work something like this:

Desktop

1. Do not disable scroll of body, instead close the Popover when doing so.
2. Accept interaction with any other element even if a Popover is open, doing so would close the already open Popover.
3. When scroll of the Popover reaches top or bottom no scrolling is bubbled up to the body making it scroll and close the Popover.

Mobile or below certain breakpoint?

1. Reveal opened Popover from bottom of viewport. Make Popover 100% of viewport. Take inspiration from iOS?
2. Show overlay when Popover is open, when overlay is clicked or scrolled close the Popover.
3. Add "Close" button at bottom on all open Popovers.
4. Not sure if nested Popovers are available, if they are theses will be opened with a higher index.

Just my thoughts.

[ajjack50n]

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?

[AnnSamsonenko]

Found quick solution for this issue

import { useScrollTrigger } from '@mui/material';

in component:

 const trigger = useScrollTrigger();

   useEffect(() => {
    trigger && isOpenMenu && handleClose();
  }, [trigger, isOpenMenu]);

it closes not so beautful as onClick but at least it works 😁

[Radivarig]

useScrollTrigger only triggers when scroll direction changes, so it will not trigger if you've scrolled already in a direction, then opened the dropdown then continued to scroll in the same direction.