fix: selectfield bug and min height (#8253)

* fix: selectfield bug and min height

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: remove overflow

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

---------

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Omar López <zomars@me.com>

packages/features/form-builder/FormBuilder.tsx

@@ -419,7 +419,7 @@ export const FormBuilder = function FormBuilder({
             fieldIndex: -1,
           })
         }>
-        <DialogContent enableOverflow data-testid="edit-field-dialog">
+        <DialogContent data-testid="edit-field-dialog">
           <DialogHeader title={t("add_a_booking_question")} subtitle={t("form_builder_field_add_subtitle")} />
           <div>
             <Form
@@ -471,6 +471,9 @@ export const FormBuilder = function FormBuilder({
                 value={FieldTypesMap[fieldForm.getValues("type")]}
                 options={FieldTypes.filter((f) => !f.systemOnly)}
                 label={t("input_type")}
+                classNames={{
+                  menuList: () => "min-h-[27.25rem]",
+                }}
               />
               <InputField
                 required

packages/ui/components/form/select/Select.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import type { GroupBase, Props, SingleValue, MultiValue } from "react-select";
 import ReactSelect from "react-select";
 
-import classNames from "@calcom/lib/classNames";
+import cx from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Label } from "../inputs/Label";
@@ -25,6 +25,7 @@ export const Select = <
   variant = "default",
   ...props
 }: SelectProps<Option, IsMulti, Group>) => {
+  const { classNames, ...restProps } = props;
   const reactSelectProps = React.useMemo(() => {
     return getReactSelectProps<Option, IsMulti, Group>({
       components: components || {},
@@ -38,19 +39,18 @@ export const Select = <
     <ReactSelect
       {...reactSelectProps}
       classNames={{
-        input: () => classNames("text-emphasis", props.classNames?.input),
+        input: () => cx("text-emphasis", props.classNames?.input),
         option: (state) =>
-          classNames(
+          cx(
             "bg-default flex cursor-pointer justify-between py-2.5 px-3 rounded-none text-default ",
             state.isFocused && "bg-subtle",
             state.isSelected && "bg-emphasis text-default",
             props.classNames?.option
           ),
-        placeholder: (state) =>
-          classNames("text-muted", state.isFocused && variant !== "checkbox" && "hidden"),
+        placeholder: (state) => cx("text-muted", state.isFocused && variant !== "checkbox" && "hidden"),
         dropdownIndicator: () => "text-default",
         control: (state) =>
-          classNames(
+          cx(
             "bg-default border-default !min-h-9 text-sm leading-4 placeholder:text-sm placeholder:font-normal focus-within:ring-2 focus-within:ring-emphasis hover:border-emphasis rounded-md border ",
             state.isMulti
               ? variant === "checkbox"
@@ -62,23 +62,23 @@ export const Select = <
             props.isDisabled && "bg-gray-100",
             props.classNames?.control
           ),
-        singleValue: () => classNames("text-emphasis placeholder:text-muted", props.classNames?.singleValue),
+        singleValue: () => cx("text-emphasis placeholder:text-muted", props.classNames?.singleValue),
         valueContainer: () =>
-          classNames("text-emphasis placeholder:text-muted flex gap-1", props.classNames?.valueContainer),
+          cx("text-emphasis placeholder:text-muted flex gap-1", props.classNames?.valueContainer),
         multiValue: () =>
-          classNames(
+          cx(
             "bg-subtle text-default rounded-md py-1.5 px-2 flex items-center text-sm leading-none",
             props.classNames?.multiValue
           ),
         menu: () =>
-          classNames(
+          cx(
             "rounded-md bg-default text-sm leading-4 text-default mt-1 border border-subtle",
             props.classNames?.menu
           ),
         groupHeading: () => "leading-none text-xs uppercase text-default pl-2.5 pt-4 pb-2",
-        menuList: () => classNames("scroll-bar scrollbar-track-w-20 rounded-md", props.classNames?.menuList),
+        menuList: () => cx("scroll-bar scrollbar-track-w-20 rounded-md", props.classNames?.menuList),
         indicatorsContainer: (state) =>
-          classNames(
+          cx(
             state.selectProps.menuIsOpen
               ? state.isMulti
                 ? "[&>*:last-child]:rotate-180 [&>*:last-child]:transition-transform"
@@ -86,9 +86,9 @@ export const Select = <
               : "text-default" // Woo it adds another SVG here on multi for some reason
           ),
         multiValueRemove: () => "text-default py-auto ml-2",
-        ...props.classNames,
+        ...classNames,
       }}
-      {...props}
+      {...restProps}
     />
   );
 };
@@ -112,10 +112,10 @@ export const SelectField = function SelectField<
   const { label = t(props.name || ""), containerClassName, labelProps, className, ...passThrough } = props;
   const id = useId();
   return (
-    <div className={classNames(containerClassName)}>
-      <div className={classNames(className)}>
+    <div className={cx(containerClassName)}>
+      <div className={cx(className)}>
         {!!label && (
-          <Label htmlFor={id} {...labelProps} className={classNames(props.error && "text-error")}>
+          <Label htmlFor={id} {...labelProps} className={cx(props.error && "text-error")}>
             {label}
           </Label>
         )}
@@ -163,7 +163,7 @@ export function SelectWithValidation<
   }, [value, setHiddenInputValue]);
 
   return (
-    <div className={classNames("relative", remainingProps.className)}>
+    <div className={cx("relative", remainingProps.className)}>
       <Select
         value={value}
         {...remainingProps}