[Joy] Select popup should have max-height (#36156)

docs/data/joy/components/select/SelectMinWidth.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+import Typography from '@mui/joy/Typography';
+
+export default function SelectMinWidth() {
+  return (
+    <Box sx={{ width: 100 }}>
+      <Select
+        defaultValue="German Shepherd"
+        slotProps={{
+          listbox: {
+            placement: 'bottom-start',
+            sx: { minWidth: 160 },
+          },
+        }}
+      >
+        <Option value="German Shepherd">German Shepherd</Option>
+        <Option value="Anatolian Shepherd Dog">Anatolian Shepherd Dog</Option>
+        <Option value="West Highland White Terrier">
+          West Highland White Terrier
+        </Option>
+        <Option value="Maltese dog">Maltese dog</Option>
+      </Select>
+      <Typography level="body3" textAlign="center" sx={{ mt: 1 }}>
+        Width is fixed at 100px
+      </Typography>
+    </Box>
+  );
+}

docs/data/joy/components/select/select.md

@@ -96,6 +96,46 @@ const App = () => (
 );
 ```
 
+### Listbox
+
+#### Maximum height
+
+To change the listbox's maximum height, use `slotProps` prop to target listbox slot:
+
+```jsx
+<Select
+  slotProps={{
+    listbox: {
+      sx: {
+        maxHeight: '300px',
+      },
+    },
+  }}
+>
+  ...
+</Select>
+```
+
+#### Minimum width
+
+By default, the listbox's width is equal to Select's button or the maximum content of its children. You can control the minimum width by using `slotProps` prop to target listbox slot.
+
+{{"demo": "SelectMinWidth.js"}}
+
+:::success
+To control the placement of the listbox, use `placement`:
+
+```js
+<Select
+  slotProps={{
+    // the left-edge of the listbox will align with button.
+    listbox: { placement: 'bottom-start' },
+  }}
+>
+```
+
+:::
+
 ### `Option` component
 
 The `Option` component is used for the chooseable options within the select.

packages/mui-joy/src/Select/Select.tsx

@@ -215,6 +215,7 @@ const SelectButton = styled('button', {
   fontFamily: 'inherit',
   cursor: 'pointer',
   whiteSpace: 'nowrap',
+  overflow: 'auto',
   ...((ownerState.value === null || ownerState.value === undefined) && {
     opacity: 'var(--Select-placeholderOpacity)',
   }),
@@ -239,6 +240,8 @@ const SelectListbox = styled(StyledList, {
     '--List-item-stickyTop': 'calc(var(--List-padding, var(--List-divider-gap)) * -1)', // negative amount of the List's padding block
     ...scopedVariables,
     minWidth: 'max-content', // prevent options from shrinking if some of them is wider than the Select's root.
+    maxHeight: '44vh', // the best value from what I tried so far which does not cause screen flicker when listbox is open.
+    overflow: 'auto',
     outline: 0,
     boxShadow: theme.shadow.md,
     zIndex: theme.vars.zIndex.popup,