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 }) => (
-          <Select
-            id={name}
-            variant="editor"
-            placeholder={__("Select a measure")}
-            onValueChange={field.onChange}
-            {...field}
-            className="w-full"
-            value={field.value ?? ""}
-            onSearch={setSearch}
-            searchValue={search}
-            disabled={disabled}
-          >
-            {measures?.map((m) => (
-              <Option 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}
+        render={({ field }) => {
+          const selectedMeasure = allMeasures.find((m) => m.id === field.value);
+          const displayValue = selectedMeasure ? selectedMeasure.name : search;
+
+          return (
+            <Combobox
+              id={name}
+              placeholder={__("Select a measure")}
+              onSelect={(measureId) => {
+                field.onChange(measureId);
+                const measure = allMeasures.find((m) => m.id === measureId);
+                setSearch(measure?.name ?? "");
+              }}
+              value={displayValue}
+              onSearch={setSearch}
+              disabled={disabled}
+              resetValueOnHide
+            >
+              {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>
-                </div>
-              </Option>
-            ))}
-          </Select>
-        )}
+                </ComboboxItem>
+              ))}
+            </Combobox>
+          );
+        }}
       />
     </div>
   );