From 99e0c5babab00b3fdefded991b41522e75fb0b00 Mon Sep 17 00:00:00 2001
From: Santiago Trigo Porres <santiagotrigoporres@gmail.com>
Date: Mon, 8 Jul 2024 14:53:58 +0200
Subject: [PATCH] fix: clear value in single select control (#62)

Co-authored-by: santiago.trigo <santiago.trigo@devo.com>
---
 .../SelectControl.cases.stories.tsx           | 27 +++++++++++++++++++
 .../SelectControl/SelectControl.tsx           |  4 +--
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/SelectControl/SelectControl.cases.stories.tsx b/packages/core/src/components/SelectControl/SelectControl.cases.stories.tsx
index 2ee6534d..468a5724 100644
--- a/packages/core/src/components/SelectControl/SelectControl.cases.stories.tsx
+++ b/packages/core/src/components/SelectControl/SelectControl.cases.stories.tsx
@@ -70,6 +70,33 @@ export const SingleOption: Story = {
     })(args),
 };
 
+export const SingleOptionWithReset: Story = {
+  name: 'Single selection with reset',
+  render: (args) =>
+    ((props) => {
+      const [value, setValue] = React.useState<SelectControlProps['value']>();
+      return (
+        <>
+          <SelectControl
+            {...props}
+            //menuIsOpen
+            onChange={(opt: TSelectOption) => {
+              setValue(opt.value)
+            }}
+            options={[
+              { value: 1, label: 'Option one' },
+              { value: 2, label: 'Option two' },
+              { value: 3, label: 'Option three' },
+              { value: 4, label: 'Option four' },
+            ]}
+            value={value}
+          />
+          <button onClick={() => setValue(undefined)}>RESET</button>
+        </>
+      );
+    })(args),
+};
+
 export const SingleOptionWithIcons: Story = {
   name: 'Single selection with option/value icons',
   render: (args) =>
diff --git a/packages/core/src/components/SelectControl/SelectControl.tsx b/packages/core/src/components/SelectControl/SelectControl.tsx
index 46feb0d7..50dc0556 100644
--- a/packages/core/src/components/SelectControl/SelectControl.tsx
+++ b/packages/core/src/components/SelectControl/SelectControl.tsx
@@ -180,9 +180,7 @@ export const SelectControl = <
         defaultStyles as StylesConfig,
         componentStyles,
       )}
-      {...(value && {
-        value: findValue(value as TSelectOption, rest.options, rest.isMulti),
-      })}
+      value={findValue(value as TSelectOption, rest.options, rest.isMulti)}
       components={
         { ...defaultComponents, ...components } as Partial<
           SelectComponents<Option, IsMulti, Group>