From e973aa206a62b389ccc8f483c2e82059ba9d8c23 Mon Sep 17 00:00:00 2001
From: elp <prithvi.prabhu@gmail.com>
Date: Tue, 18 Oct 2022 12:34:17 -0700
Subject: [PATCH] feat: Disabled state for dropdown list #28

---
 help/docs/guide/dropdown-list.md | 18 ++++++++++++++++++
 py/pkg/docs/dropdown_list.py     | 11 +++++++++++
 web/src/droplist.tsx             |  3 ++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/help/docs/guide/dropdown-list.md b/help/docs/guide/dropdown-list.md
index f88a9529..a673b9c0 100644
--- a/help/docs/guide/dropdown-list.md
+++ b/help/docs/guide/dropdown-list.md
@@ -88,3 +88,21 @@ while True:
 
 
 ![Screenshot](assets/screenshots/multi_dropdown_live.png)
+
+
+## Disable
+
+Set `disabled=True` to disable.
+
+
+```py
+view(box(
+    'Choose some colors',
+    mode='multi menu',
+    options=['green', 'yellow', 'orange', 'red'],
+    disabled=True
+))
+```
+
+
+![Screenshot](assets/screenshots/multi_dropdown_disable.png)
diff --git a/py/pkg/docs/dropdown_list.py b/py/pkg/docs/dropdown_list.py
index fb3711c4..f4cfad1c 100644
--- a/py/pkg/docs/dropdown_list.py
+++ b/py/pkg/docs/dropdown_list.py
@@ -73,3 +73,14 @@ def multi_dropdown_live(view: View):  # height 3
             ),
             f'You chose {choices}.'
         )
+
+
+# ## Disable
+# Set `disabled=True` to disable.
+def multi_dropdown_disable(view: View):  # height 2
+    view(box(
+        'Choose some colors',
+        mode='multi menu',
+        options=['green', 'yellow', 'orange', 'red'],
+        disabled=True
+    ))
diff --git a/web/src/droplist.tsx b/web/src/droplist.tsx
index 1a320dea..c451c8cb 100644
--- a/web/src/droplist.tsx
+++ b/web/src/droplist.tsx
@@ -21,7 +21,7 @@ import { BoxProps, make } from './ui';
 
 export const Droplist = make(({ context, box }: BoxProps) => {
   const
-    { name, modes, text, placeholder, error, options: rawOptions, style } = box,
+    { name, modes, text, placeholder, error, options: rawOptions, style, disabled } = box,
     options = rawOptions ?? [],
     required = modes.has('required'),
     live = modes.has('live'),
@@ -53,6 +53,7 @@ export const Droplist = make(({ context, box }: BoxProps) => {
           errorMessage={error}
           required={required ? true : false}
           onChange={onChange}
+          disabled={disabled === true}
         />
       </div>
     )