Select grouped <ListSubheader>'s are overlapping on top

[BernardA]

When limited by the height, scrolling the options will make each subheader remain on top even when all its sub-items have being scrolled up. Normally each subheader should be replaced by the next subheader.

• [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 😯

Subheaders overlap

Expected Behavior 🤔

They should not.

Steps to Reproduce 🕹

Steps:

1. Go to https://codesandbox.io/s/material-demo-forked-xop0b
   2.Resize the browser height to force scroll
   3.Open the second select and scroll

Context 🔦

Your Environment 🌎

Current version as per sandbox

Tech	Version
Material-UI	4
React
Browser
TypeScript
etc.

[brorlarsnicklas]

I might be wrong, but I think that this is not a problem with the material-ui components in general. It is just the way position sticky works.

Each of the "ListSubHeaders" have position: sticky and in order to get the behavior that I think you are expecting, you have to put your subheaders and their items inside a container. Adding e.g, a div around those will fix your problem.

[oliviertassinari]

Duplicate of #18200

[BernardA]

@brorlarsnicklas, the codepen I linked to is forked from your select demo page. I only added a few lines to the options so that the issue is more clearly visible. So, it is indeed a problem with material-ui.