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".
pull/6424/head^2
Thomas Brodusch 2023-01-12 17:29:37 +01:00 committed by GitHub
parent 6414903567
commit 1ba191c4ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions

View File

@ -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 (