Add listbox placement demo for Select (#38130)

mui · Jul 25, 2023 · 1140095 · 1140095
1 parent 35f2950
commit 1140095
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 0 deletions.
diff --git a/docs/data/joy/components/select/SelectPosition.js b/docs/data/joy/components/select/SelectPosition.js
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+function SelectPosition() {
+  return (
+    <Select
+      placeholder="Select address"
+      sx={{ width: 240 }}
+      slotProps={{
+        listbox: {
+          placement: 'bottom-start',
+        },
+      }}
+    >
+      <Option value="1">
+        Flat 5, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="2">
+        Flat 6, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="3">
+        Flat 6b, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+    </Select>
+  );
+}
+
+export default SelectPosition;
diff --git a/docs/data/joy/components/select/SelectPosition.tsx b/docs/data/joy/components/select/SelectPosition.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+function SelectPosition() {
+  return (
+    <Select
+      placeholder="Select address"
+      sx={{ width: 240 }}
+      slotProps={{
+        listbox: {
+          placement: 'bottom-start',
+        },
+      }}
+    >
+      <Option value="1">
+        Flat 5, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="2">
+        Flat 6, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+      <Option value="3">
+        Flat 6b, 24 Bhlenheiman Avenue, South Kensington, EW13 9SD
+      </Option>
+    </Select>
+  );
+}
+
+export default SelectPosition;
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
@@ -132,6 +132,12 @@ To control the placement of the listbox, use `placement`:
 
 :::
 
+#### Placement
+
+To align `listbox` position to `Select` while displaying long options, use `slotProps` prop to position listbox slot:
+
+{{"demo": "SelectPosition.js"}}
+
 #### Controlling the open state
 
 You can control the open state of the select with the `listboxOpen` prop. Alternatively, it is also possible to set the initial (uncontrolled) open state of the component with the `defaultListboxOpen` prop.