maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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".
This commit is contained in:
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/ui/components/form/select/Select.tsx
View File

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