mlaursen / react-md

React material design - An accessible React component library built from the Material Design guidelines in Sass
https://react-md.dev
MIT License
2.34k stars 303 forks source link

[Select] Not scrolling when there are many items #1461

Closed stickfigure closed 6 months ago

stickfigure commented 7 months ago

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 commented 7 months ago

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 commented 6 months ago

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,
}}