[Select] Not scrolling when there are many items

[stickfigure]

This is a weird one. When opening the dropdown list (with many items) on a Select in my app, it doesn't allow scrolling.

Picture: https://monosnap.com/file/r7WfwTGQVgjDx2urh258eAI9re0b37

I can see the problem - in the Select demo, the listbox gets a bottom element style. For some reason my Select does not. I tried tracing into the useFixedPositioning hook but it is beyond me.

I've been trying unsuccessfully to create a sandbox example. Possibly related is that this Select is on a dialog, but it's not just that.

I'm stuck. What circumstances cause useFixedPositioning to include (or not include) the bottom style?

This is v5.1.5 of react-md.

[stickfigure]

I finally made some progress. It looks like if there's too many lines, but not too-too many lines, the scrollbar doesn't work.

I forked the form-example-simple-select. The select is on a dialog in the middle of the page. I cut down the number of states so that there's too many to fit in the popup, but not so many that they would fill the full vertical space.

You may need to reduce the vertical size of the window to see this behavior:

https://codesandbox.io/p/sandbox/form-example-simple-select-example-forked-zxqmnf?file=%2Fsrc%2FDemo.tsx%3A50%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpuimqw100063b6g5k0n6cim%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpuimqw100023b6gst8pcy2t%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpuimqw100033b6ga27vbole%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpuimqw100053b6g0iy66max%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpuimqw100023b6gst8pcy2t%2522%253A%257B%2522id%2522%253A%2522clpuimqw100023b6gst8pcy2t%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpuiqb7z00023b6g59rck7vg%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A50%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A50%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FDemo.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clpuiqb7z00023b6g59rck7vg%2522%257D%252C%2522clpuimqw100053b6g0iy66max%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpuimqw100043b6gfimjg7ys%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%2522%257D%255D%252C%2522id%2522%253A%2522clpuimqw100053b6g0iy66max%2522%252C%2522activeTabId%2522%253A%2522clpuimqw100043b6gfimjg7ys%2522%257D%252C%2522clpuimqw100033b6ga27vbole%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clpuimqw100033b6ga27vbole%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[mlaursen]

Thank you for the great reproducible demo! It looks like I fixed it in v6.0.0-next.2, so I'll port the positioning fixes back to here. I'll also add a positionOptions prop to the Select so you can customize the positioning a bit if needed. Example:

positionOptions={{
  preventOverlap: true,
  preventSwapping: true,
}}