From 11400955255093f2940bd519d3819e80d1c0733d Mon Sep 17 00:00:00 2001
From: sai chand <60743144+sai6855@users.noreply.github.com>
Date: Tue, 25 Jul 2023 11:16:37 +0530
Subject: [PATCH] Add listbox placement demo for Select (#38130)

---
 .../joy/components/select/SelectPosition.js   | 29 +++++++++++++++++++
 .../joy/components/select/SelectPosition.tsx  | 29 +++++++++++++++++++
 docs/data/joy/components/select/select.md     |  6 ++++
 3 files changed, 64 insertions(+)
 create mode 100644 docs/data/joy/components/select/SelectPosition.js
 create mode 100644 docs/data/joy/components/select/SelectPosition.tsx

diff --git a/docs/data/joy/components/select/SelectPosition.js b/docs/data/joy/components/select/SelectPosition.js
new file mode 100644
index 00000000000000..b0a9344f2fea65
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..b0a9344f2fea65
--- /dev/null
+++ 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
index 0357788d301d04..1dd1507f864721 100644
--- 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.