chore: temp add console on select search

bleu · Apr 26, 2024 · b713ae5 · b713ae5
1 parent 39c77a4
commit b713ae5
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 64 deletions.
diff --git a/src/components/FormBuilder/fields/selects/SearchableSelectField.tsx b/src/components/FormBuilder/fields/selects/SearchableSelectField.tsx
@@ -27,66 +27,70 @@ import { withConditional } from "../../fields";
 import { SelectFieldProps } from "./SelectField";
 
 export const SearchableSelectField = withConditional<SelectFieldProps>(
-  ({ form, field }) => (
-    <FormField
-      control={form.control}
-      name={field.name}
-      render={({ field: formField }) => (
-        <FormItem className="flex flex-col">
-          <input hidden {...formField} value={formField.value} />
-          <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
-          <FormDescription>{field.description}</FormDescription>
-          <Popover>
-            <PopoverTrigger asChild>
-              <FormControl>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  className={cn(
-                    "w-[200px] justify-between",
-                    !formField.value && "text-muted-foreground"
-                  )}
-                >
-                  {formField.value
-                    ? field.options?.find(
-                        (option) => option.value === formField.value
-                      )?.label
-                    : "Select an option"}
-                  <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
-                </Button>
-              </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className="w-[200px] p-0">
-              <Command>
-                <CommandInput placeholder="Search options..." />
-                <CommandEmpty>No options found.</CommandEmpty>
-                <CommandGroup className="max-h-80 overflow-y-auto">
-                  {field.options?.map((option) => (
-                    <CommandItem
-                      value={option.label}
-                      key={option.value}
-                      onSelect={() => {
-                        form.setValue(field.name, option.value);
-                      }}
-                    >
-                      <CheckIcon
-                        className={cn(
-                          "mr-2 h-4 w-4",
-                          option.value === formField.value
-                            ? "opacity-100"
-                            : "opacity-0"
-                        )}
-                      />
-                      {option.label}
-                    </CommandItem>
-                  ))}
-                </CommandGroup>
-              </Command>
-            </PopoverContent>
-          </Popover>
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  )
+  ({ form, field }) => {
+    // eslint-disable-next-line no-console
+    console.log(field);
+    return (
+      <FormField
+        control={form.control}
+        name={field.name}
+        render={({ field: formField }) => (
+          <FormItem className="flex flex-col">
+            <input hidden {...formField} value={formField.value} />
+            <FormLabel tooltip={field.tooltip}>{field.label}</FormLabel>
+            <FormDescription>{field.description}</FormDescription>
+            <Popover>
+              <PopoverTrigger asChild>
+                <FormControl>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    className={cn(
+                      "w-[200px] justify-between",
+                      !formField.value && "text-muted-foreground"
+                    )}
+                  >
+                    {formField.value
+                      ? field.options?.find(
+                          (option) => option.value === formField.value
+                        )?.label
+                      : "Select an option"}
+                    <CaretSortIcon className="ml-2 size-4 shrink-0 opacity-50" />
+                  </Button>
+                </FormControl>
+              </PopoverTrigger>
+              <PopoverContent className="w-[200px] p-0">
+                <Command>
+                  <CommandInput placeholder="Search options..." />
+                  <CommandEmpty>No options found.</CommandEmpty>
+                  <CommandGroup className="max-h-80 overflow-y-auto">
+                    {field.options?.map((option) => (
+                      <CommandItem
+                        value={option.label}
+                        key={option.value}
+                        onSelect={() => {
+                          form.setValue(field.name, option.value);
+                        }}
+                      >
+                        <CheckIcon
+                          className={cn(
+                            "mr-2 h-4 w-4",
+                            option.value === formField.value
+                              ? "opacity-100"
+                              : "opacity-0"
+                          )}
+                        />
+                        {option.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    );
+  }
 );
diff --git a/src/components/FormBuilder/fields/selects/SelectField.tsx b/src/components/FormBuilder/fields/selects/SelectField.tsx
@@ -12,7 +12,7 @@ import * as Select from "#/components/ui/Select";
 import { BaseField, withConditional } from "../../fields";
 
 export interface SelectFieldProps extends BaseField {
-  options: Array<{
+  options?: Array<{
     label: string;
     tooltip?: string;
     value: string;
@@ -47,7 +47,7 @@ export const SelectField = withConditional<SelectFieldProps>(
                 </Select.SelectTrigger>
               </FormControl>
               <Select.SelectContent className="z-[10000]">
-                {field.options.map((option) => (
+                {field.options?.map((option) => (
                   <Select.SelectItem
                     key={String(option.value)}
                     value={String(option.value)}