fix: updated select field with preference (#15805)

* 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 <[email protected]> Co-authored-by: raycastbot <[email protected]>
raycast · Dec 18, 2024 · cd129b5 · cd129b5
1 parent cd98501
commit cd129b5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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";