fix: clear value in single select control (#62)

Co-authored-by: santiago.trigo <[email protected]>
DevoInc · Jul 8, 2024 · 99e0c5b · 99e0c5b
1 parent 8816a07
commit 99e0c5b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git 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
@@ -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>