From 1ba191c4ed1e095c50f11ef76ca6033214bca20b Mon Sep 17 00:00:00 2001
From: Thomas Brodusch <3238312+thomasbrodusch@users.noreply.github.com>
Date: Thu, 12 Jan 2023 17:29:37 +0100
Subject: [PATCH] fix: Location dropdown is overflowing #6376 (#6415)

* add `menuPlacement` react-select's props to `getReactSelectProps` to avoid dropdown overflow on small screen.
By default, set to "auto".
---
 packages/ui/components/form/select/Select.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/form/select/Select.tsx b/packages/ui/components/form/select/Select.tsx
index cf3397aa79..ebc243c197 100644
--- a/packages/ui/components/form/select/Select.tsx
+++ b/packages/ui/components/form/select/Select.tsx
@@ -7,6 +7,7 @@ import ReactSelect, {
   SingleValue,
   MultiValue,
   SelectComponentsConfig,
+  MenuPlacement,
 } from "react-select";
 
 import classNames from "@calcom/lib/classNames";
@@ -37,10 +38,13 @@ export const getReactSelectProps = <
 >({
   className,
   components,
+  menuPlacement = "auto",
 }: {
   className?: string;
   components: SelectComponentsConfig<Option, IsMulti, Group>;
+  menuPlacement?: MenuPlacement;
 }) => ({
+  menuPlacement,
   className: classNames("block h-[36px] w-full min-w-0 flex-1 rounded-md", className),
   classNamePrefix: "cal-react-select",
   components: {
@@ -69,7 +73,10 @@ export const Select = <
   ...props
 }: SelectProps<Option, IsMulti, Group>) => {
   const reactSelectProps = React.useMemo(() => {
-    return getReactSelectProps<Option, IsMulti, Group>({ className, components: components || {} });
+    return getReactSelectProps<Option, IsMulti, Group>({
+      className,
+      components: components || {},
+    });
   }, [className, components]);
 
   return (