Merge pull request #353 from supabase/fix/listbox-to-not-trigger-onse…

…lect-if-disabled fix: prevent on select if disabled for listbox option
supabase · May 31, 2022 · 8777667 · 8777667
2 parents 81da906 + 3bbadff
commit 8777667
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/components/Listbox/Listbox2.tsx b/src/components/Listbox/Listbox2.tsx
@@ -271,12 +271,11 @@ function Listbox({
 
 interface OptionProps {
   id?: string
-  className?: string
   value: any
-  children?: React.ReactNode
   label: string
-  addOnBefore?: ({ active, selected }: any) => React.ReactNode
   disabled?: boolean
+  children?: React.ReactNode
+  addOnBefore?: ({ active, selected }: any) => React.ReactNode
 }
 
 type addOnBefore = {
@@ -286,12 +285,11 @@ type addOnBefore = {
 
 function SelectOption({
   id,
-  className,
   value,
-  children,
   label,
-  addOnBefore,
   disabled = false,
+  children,
+  addOnBefore,
 }: OptionProps) {
   const __styles = styleHandler('listbox')
 
@@ -308,7 +306,7 @@ function SelectOption({
               active ? __styles.option_active : ' ',
               disabled ? __styles.option_disabled : ' '
             )}
-            onSelect={() => onChange(value)}
+            onSelect={() => (!disabled ? onChange(value) : {})}
           >
             <div className={__styles.option_inner}>
               {addOnBefore && addOnBefore({ active, selected })}

diff --git a/src/components/Listbox/SelectStyled.stories.tsx b/src/components/Listbox/SelectStyled.stories.tsx
@@ -37,6 +37,20 @@ export const Default = (args: any) => (
   </Listbox>
 )
 
+export const WithDisabled = (args: any) => (
+  <Listbox label="Default listbox">
+    <Listbox.Option label="Option 1" value="option-1">
+      Option 1
+    </Listbox.Option>
+    <Listbox.Option label="Option 2" value="option-2">
+      Option 2
+    </Listbox.Option>
+    <Listbox.Option disabled label="Option 3" value="option-3">
+      Option 3
+    </Listbox.Option>
+  </Listbox>
+)
+
 const people = [
   {
     value: 1,