Fix measure input in new task

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>

apps/console/src/components/form/MeasureSelectField.tsx

@@ -1,4 +1,4 @@
-import { Field, Option, Select } from "@probo/ui";
+import { Field, Combobox, ComboboxItem } from "@probo/ui";
 import { Suspense, useMemo, useState, type ComponentProps } from "react";
 import { useTranslate } from "@probo/i18n";
 import { type Control, Controller } from "react-hook-form";
@@ -22,7 +22,7 @@ export function MeasureSelectField({
   return (
     <Field {...props}>
       <Suspense
-        fallback={<Select variant="editor" disabled placeholder="Loading..." />}
+        fallback={<Combobox onSearch={() => {}} placeholder="Loading..." disabled><div /></Combobox>}
       >
         <MeasureSelectWithQuery
           organizationId={organizationId}
@@ -54,36 +54,46 @@ function MeasureSelectWithQuery(
     );
   }, [data?.measures.edges, search]);
 
+  const allMeasures = useMemo(() => {
+    return data?.measures.edges?.map((edge) => edge.node) ?? [];
+  }, [data?.measures.edges]);
+
   return (
     <div>
       <Controller
         control={control}
         name={name}
-        render={({ field }) => (
+        render={({ field }) => {
-          <Select
+          const selectedMeasure = allMeasures.find((m) => m.id === field.value);
-            id={name}
+          const displayValue = selectedMeasure ? selectedMeasure.name : search;
-            variant="editor"
+
-            placeholder={__("Select a measure")}
+          return (
-            onValueChange={field.onChange}
+            <Combobox
-            {...field}
+              id={name}
-            className="w-full"
+              placeholder={__("Select a measure")}
-            value={field.value ?? ""}
+              onSelect={(measureId) => {
-            onSearch={setSearch}
+                field.onChange(measureId);
-            searchValue={search}
+                const measure = allMeasures.find((m) => m.id === measureId);
-            disabled={disabled}
+                setSearch(measure?.name ?? "");
-          >
+              }}
-            {measures?.map((m) => (
+              value={displayValue}
-              <Option key={m.id} value={m.id}>
+              onSearch={setSearch}
-                <div className="space-y-1 text-start min-w-0">
+              disabled={disabled}
-                  <div className="max-w-75 ellipsis overflow-hidden whitespace-pre-wrap">
+              resetValueOnHide
-                    {m.name}
+            >
+              {measures?.map((m) => (
+                <ComboboxItem key={m.id} value={m.id}>
+                  <div className="space-y-1 text-start min-w-0">
+                    <div className="max-w-75 ellipsis overflow-hidden whitespace-pre-wrap">
+                      {m.name}
+                    </div>
+                    <div className="text-sm text-txt-secondary">{m.category}</div>
                   </div>
-                  <div className="text-sm text-txt-secondary">{m.category}</div>
+                </ComboboxItem>
-                </div>
+              ))}
-              </Option>
+            </Combobox>
-            ))}
+          );
-          </Select>
+        }}
-        )}
       />
     </div>
   );