From 4d82809a0ee371f280a1b3ca852e8be17e2f6e4d Mon Sep 17 00:00:00 2001
From: Stephanie Yang <steph@goodcode.us>
Date: Sat, 2 Nov 2024 02:13:39 +0800
Subject: [PATCH] fix disable select option and add story

---
 src/form/Select/SelectMenu/SelectMenu.tsx |  1 +
 src/form/Select/SingleSelect.story.tsx    | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/src/form/Select/SelectMenu/SelectMenu.tsx b/src/form/Select/SelectMenu/SelectMenu.tsx
index 5240a257..30170ebf 100644
--- a/src/form/Select/SelectMenu/SelectMenu.tsx
+++ b/src/form/Select/SelectMenu/SelectMenu.tsx
@@ -156,6 +156,7 @@ export const SelectMenu: FC<SelectMenuProps> = ({
             event.stopPropagation();
             onSelectedChange(o);
           }}
+          disabled={o.disabled}
         >
           {o.menuLabel ? (
             o.menuLabel
diff --git a/src/form/Select/SingleSelect.story.tsx b/src/form/Select/SingleSelect.story.tsx
index 12517cdb..5a2ad3c7 100644
--- a/src/form/Select/SingleSelect.story.tsx
+++ b/src/form/Select/SingleSelect.story.tsx
@@ -622,6 +622,21 @@ export const Disabled = () => (
   </div>
 );
 
+export const DisabledOption = () => {
+  const [value, setValue] = useState<string | null>(null);
+  return (
+    <div style={{ width: 300 }}>
+      <Select value={value} onChange={v => setValue(v)} placeholder="Select...">
+        <SelectOption value="facebook">facebook</SelectOption>
+        <SelectOption value="twitter" disabled>
+          twitter
+        </SelectOption>
+        <SelectOption value="twitch">twitch</SelectOption>
+      </Select>
+    </div>
+  );
+};
+
 export const Unfilterable = () => {
   const [value, setValue] = useState<string | null>('facebook');
   return (