From 1df0ce35a646f1dc464ce41ad76793445a3b438c Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Thu, 6 Oct 2022 09:35:52 +0800
Subject: [PATCH] [ui][select] make uncontrolled

---
 apps/storybook/stories/select.stories.tsx | 25 +++++++++++++++++++++++
 packages/ui/src/Select/Select.tsx         | 11 ++++++----
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/apps/storybook/stories/select.stories.tsx b/apps/storybook/stories/select.stories.tsx
index e7b02537..145936ed 100644
--- a/apps/storybook/stories/select.stories.tsx
+++ b/apps/storybook/stories/select.stories.tsx
@@ -176,3 +176,28 @@ export function Disabled() {
     </div>
   );
 }
+
+export function Uncontrolled() {
+  return (
+    <div className="space-x-4">
+      <Select
+        defaultValue="apple"
+        label="Select a fruit"
+        options={[
+          {
+            label: 'Apple',
+            value: 'apple',
+          },
+          {
+            label: 'Banana',
+            value: 'banana',
+          },
+          {
+            label: 'Orange',
+            value: 'orange',
+          },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/packages/ui/src/Select/Select.tsx b/packages/ui/src/Select/Select.tsx
index fe1fd708..294ae34d 100644
--- a/packages/ui/src/Select/Select.tsx
+++ b/packages/ui/src/Select/Select.tsx
@@ -16,18 +16,20 @@ export type SelectItem<T> = Readonly<{
 export type SelectDisplay = 'block' | 'inline';
 
 type Props<T> = Readonly<{
+  defaultValue?: T;
   display?: SelectDisplay;
   isLabelHidden?: boolean;
   label: string;
   name?: string;
-  onChange: (value: string) => void;
+  onChange?: (value: string) => void;
   options: ReadonlyArray<SelectItem<T>>;
-  value: T;
+  value?: T;
 }> &
   Readonly<Attributes>;
 
 function Select<T>(
   {
+    defaultValue,
     display,
     disabled,
     label,
@@ -59,11 +61,12 @@ function Select<T>(
           'focus:border-primary-500 focus:ring-primary-500 rounded-md border-slate-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm',
           disabled && 'bg-slate-100',
         )}
+        defaultValue={defaultValue != null ? String(defaultValue) : undefined}
         disabled={disabled}
         id={id}
-        value={String(value)}
+        value={value != null ? String(value) : undefined}
         onChange={(event) => {
-          onChange(event.target.value);
+          onChange?.(event.target.value);
         }}
         {...props}>
         {options.map(({ label: optionLabel, value: optionValue }) => (