From c5a0ae057da78def07595fc6387ef601f9a14c5d Mon Sep 17 00:00:00 2001
From: JeanneGrenet <jeanne.grenet@gmail.com>
Date: Thu, 7 Nov 2024 17:52:58 +0100
Subject: [PATCH] fix : clearable select and add a story in storybook

---
 .../Form/FieldSelect/docs.stories.tsx         | 31 ++++++++++++++++++-
 src/components/Form/FieldSelect/index.tsx     | 13 ++++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/components/Form/FieldSelect/docs.stories.tsx b/src/components/Form/FieldSelect/docs.stories.tsx
index f987b9ebd..e6366efc7 100644
--- a/src/components/Form/FieldSelect/docs.stories.tsx
+++ b/src/components/Form/FieldSelect/docs.stories.tsx
@@ -12,7 +12,7 @@ export default {
 type FormSchema = z.infer<ReturnType<typeof zFormSchema>>;
 const zFormSchema = () =>
   z.object({
-    color: z.enum(['red', 'green', 'blue']),
+    color: z.enum(['red', 'green', 'blue']).nullish(),
   });
 
 const options = [
@@ -144,3 +144,32 @@ export const ChakraProps = () => {
     </Form>
   );
 };
+
+export const Clearable = () => {
+  const form = useForm<FormSchema>(formOptions);
+
+  return (
+    <Form {...form} onSubmit={(values) => console.log(values)}>
+      <Stack spacing={4}>
+        <FormField>
+          <FormFieldLabel>Colors</FormFieldLabel>
+          <FormFieldController
+            control={form.control}
+            type="select"
+            name="color"
+            placeholder="Placeholder"
+            options={options}
+            selectProps={{
+              isClearable: true,
+            }}
+          />
+        </FormField>
+        <Box>
+          <Button type="submit" variant="@primary">
+            Submit
+          </Button>
+        </Box>
+      </Stack>
+    </Form>
+  );
+};
diff --git a/src/components/Form/FieldSelect/index.tsx b/src/components/Form/FieldSelect/index.tsx
index a9e82bc68..23586f5a8 100644
--- a/src/components/Form/FieldSelect/index.tsx
+++ b/src/components/Form/FieldSelect/index.tsx
@@ -60,10 +60,17 @@ export const FieldSelect = <
               autoFocus={props.autoFocus}
               value={selectValue}
               isDisabled={props.isDisabled}
-              // @ts-expect-error should fix the typing. This error pops when
-              // we propagate the `selectProps`
-              onChange={(option) => onChange(option?.value)}
               {...props.selectProps}
+              onChange={(newValue, actionMeta) => {
+                if (actionMeta.action === 'clear') {
+                  // Set the value to null on clear
+                  onChange(null);
+                  return;
+                }
+                // @ts-expect-error TODO should fix the typing. This error pops when
+                // we propagate the `selectProps`
+                onChange(newValue?.value);
+              }}
               {...fieldProps}
             />
             <FormFieldError />