Add support for multi-select field type

extensions/twenty/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Twenty Changelog
 
+## [Enhancements] - {PR_MERGE_DATE}
+
+- Added support for multi-select field type
+
 ## [Enhancements] - 2024-12-18
 
 - Updated select field type with preference

extensions/twenty/src/components/FieldComponent.tsx

@@ -3,6 +3,7 @@ import { DataModelField } from "../services/zod/schema/recordFieldSchema";
 import TextInput from "./TextInput";
 import Select from "./Select";
 import Rating from "./Rating";
+import MultiSelect from "./MultiSelect";
 
 type FieldComponentProps = {
   values: {
@@ -25,6 +26,12 @@ export default function FieldComponent({ values }: FieldComponentProps) {
     case "RATING": {
       return <Rating values={{ field }} {...itemProps} />;
     }
+    case "MULTI_SELECT": {
+      return <MultiSelect values={{ field }} {...itemProps} />;
+    }
+    // case "MULTI_SELECT": {
+    //   return <MultiSelect values={{ field }} />;
+    // }
     default:
       return <></>;
   }

extensions/twenty/src/components/MultiSelect.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from "react";
+import { Form, FormItemRef } from "@raycast/api";
+import { DataModelField } from "../services/zod/schema/recordFieldSchema";
+import { optionIcons } from "../enum/icons";
+
+type MultiSelectProps = {
+  field: DataModelField;
+};
+
+// Use forwardRef for consistency and ref handling
+const MultiSelect = forwardRef<FormItemRef, { values: MultiSelectProps } & React.ComponentProps<typeof Form.TagPicker>>(
+  ({ values, ...rest }, ref) => {
+    const { field } = values;
+    const { options } = field;
+
+    const defaultValue = Array.isArray(field.defaultValue)
+      ? field.defaultValue.map((value) => value.replace(/^'|'$/g, "").trim())
+      : field.defaultValue
+        ? [field.defaultValue.replace(/^'|'$/g, "").trim()]
+        : [];
+
+    const { id, value, ...modifiedRest } = rest; // eslint-disable-line @typescript-eslint/no-unused-vars
+
+    return (
+      <Form.TagPicker
+        title={field.label}
+        defaultValue={defaultValue}
+        id={field.name}
+        ref={ref as React.Ref<FormItemRef>}
+        {...modifiedRest}
+      >
+        {options?.map((option) => (
+          <Form.TagPicker.Item
+            key={option.id}
+            value={option.value ?? ""}
+            title={option.label ?? ""}
+            icon={optionIcons[option?.color ?? ""] ?? undefined}
+          />
+        ))}
+      </Form.TagPicker>
+    );
+  },
+);
+
+// Set display name for better debugging
+MultiSelect.displayName = "MultiSelect";
+
+export default MultiSelect;

extensions/twenty/src/helper/formatValues.ts

@@ -36,6 +36,12 @@ export function formatValues(values: Record<string, any>, objectRecordMetadata:
           }
           break;
         }
+        case "MULTI_SELECT": {
+          if (formattedValues[key] === "") {
+            formattedValues[key] = null;
+          }
+          break;
+        }
         default:
           break;
       }