From cd129b582b6b79877d308ff4b40e15e48cd1d0b4 Mon Sep 17 00:00:00 2001
From: Nirmit Pandya <99133936+GeniusNirmit@users.noreply.github.com>
Date: Wed, 18 Dec 2024 14:00:49 +0530
Subject: [PATCH] fix: updated select field with preference (#15805)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: updated select field with preference

* fix: linting issue

* Update Select.tsx

* Update CHANGELOG.md and optimise images

---------

Co-authored-by: Per Nielsen Tikær <per@raycast.com>
Co-authored-by: raycastbot <bot@raycast.com>
---
 extensions/twenty/CHANGELOG.md                |  4 ++
 .../twenty/src/components/FieldComponent.tsx  |  2 +-
 extensions/twenty/src/components/Select.tsx   | 56 +++++++++++--------
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/extensions/twenty/CHANGELOG.md b/extensions/twenty/CHANGELOG.md
index 24818eb3a9187..9673997772fcb 100644
--- a/extensions/twenty/CHANGELOG.md
+++ b/extensions/twenty/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Twenty Changelog
 
+## [Enhancements] - 2024-12-18
+
+- Updated select field type with preference
+
 ## [Enhancements] - 2024-12-11
 
 - Added support for rating field type
diff --git a/extensions/twenty/src/components/FieldComponent.tsx b/extensions/twenty/src/components/FieldComponent.tsx
index f15292ffd3d32..6fd8421f92d3b 100644
--- a/extensions/twenty/src/components/FieldComponent.tsx
+++ b/extensions/twenty/src/components/FieldComponent.tsx
@@ -20,7 +20,7 @@ export default function FieldComponent({ values }: FieldComponentProps) {
       return <TextInput values={{ field, placeholder: `Enter ${field.name}...` }} {...itemProps} />;
     }
     case "SELECT": {
-      return <Select values={{ field }} />;
+      return <Select values={{ field }} {...itemProps} />;
     }
     case "RATING": {
       return <Rating values={{ field }} {...itemProps} />;
diff --git a/extensions/twenty/src/components/Select.tsx b/extensions/twenty/src/components/Select.tsx
index 9fb97729b9f4f..cdac4d5e2bb83 100644
--- a/extensions/twenty/src/components/Select.tsx
+++ b/extensions/twenty/src/components/Select.tsx
@@ -1,4 +1,5 @@
-import { Form } from "@raycast/api";
+import React, { forwardRef } from "react";
+import { Form, FormItemRef } from "@raycast/api";
 import { DataModelField } from "../services/zod/schema/recordFieldSchema";
 import { randomUUID } from "crypto";
 import { optionIcons } from "../enum/icons";
@@ -7,29 +8,40 @@ type SelectProps = {
   field: DataModelField;
 };
 
-const Select = ({ values }: { values: SelectProps }) => {
-  const { field } = values;
-  const { options } = field;
-  const defaultValue = field.defaultValue ? field.defaultValue.replace(/^'|'$/g, "") : "";
-  return (
-    <Form.Dropdown title={field.label} defaultValue={defaultValue} id={field.name}>
-      <Form.Dropdown.Item
-        key={randomUUID().toString()}
-        value={""}
-        title={`No ${field.label}`}
-        icon={optionIcons["white"]}
-      />
-      {options?.map((option) => (
+// Use forwardRef to allow ref forwarding
+const Select = forwardRef<FormItemRef, { values: SelectProps } & React.ComponentProps<typeof Form.Dropdown>>(
+  ({ values, ...rest }, ref) => {
+    const { field } = values;
+    const { options } = field;
+    const defaultValue = field.defaultValue ? field.defaultValue.replace(/^'|'$/g, "") : "";
+    const { id, value, ...modifiedRest } = rest; // eslint-disable-line @typescript-eslint/no-unused-vars
+
+    return (
+      <Form.Dropdown
+        title={field.label}
+        defaultValue={defaultValue}
+        id={field.name}
+        ref={ref as React.Ref<FormItemRef>}
+        {...modifiedRest}
+      >
         <Form.Dropdown.Item
-          key={option.id}
-          value={option.value ?? ""}
-          title={option.label ?? ""}
-          icon={optionIcons[option?.color ?? ""] ?? undefined}
+          key={randomUUID().toString()}
+          value={""}
+          title={`No ${field.label}`}
+          icon={optionIcons["white"]}
         />
-      ))}
-    </Form.Dropdown>
-  );
-};
+        {options?.map((option) => (
+          <Form.Dropdown.Item
+            key={option.id}
+            value={option.value ?? ""}
+            title={option.label ?? ""}
+            icon={optionIcons[option?.color ?? ""] ?? undefined}
+          />
+        ))}
+      </Form.Dropdown>
+    );
+  },
+);
 
 // Set display name for better debugging
 Select.displayName = "Select";