From a1957bc9e2cb31526b00504784e5f1078c471423 Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@khanacademy.org>
Date: Tue, 11 Jun 2024 15:21:52 -0600
Subject: [PATCH] Add disabled prop to DropdownCore so that it's interactions
 can be disabled if it is true. This is needed now that the dropdown opener
 could potentially not have the disabled attribute set (since we use
 aria-disabled now on the selectopener so that it can be focusable

---
 .../src/components/dropdown-core.tsx                   | 10 +++++++---
 .../src/components/multi-select.tsx                    |  2 ++
 .../src/components/single-select.tsx                   |  2 ++
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx b/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
index d0a45dda7..1e7058e07 100644
--- a/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
@@ -169,6 +169,10 @@ type ExportProps = Readonly<{
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean;
+    /**
+     * Whether the dropdown and it's interactions should be disabled.
+     */
+    disabled?: boolean;
 
     // Optional props with defaults
     /**
@@ -1040,12 +1044,12 @@ class DropdownCore extends React.Component<Props, State> {
     }
 
     render(): React.ReactNode {
-        const {open, opener, style, className} = this.props;
+        const {open, opener, style, className, disabled} = this.props;
 
         return (
             <View
-                onKeyDown={this.handleKeyDown}
-                onKeyUp={this.handleKeyUp}
+                onKeyDown={!disabled ? this.handleKeyDown : undefined}
+                onKeyUp={!disabled ? this.handleKeyUp : undefined}
                 style={[styles.menuWrapper, style]}
                 className={className}
             >
diff --git a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
index 09e98bbaa..808a58ed8 100644
--- a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
@@ -549,6 +549,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             isFilterable,
             "aria-invalid": ariaInvalid,
             "aria-required": ariaRequired,
+            disabled,
         } = this.props;
         const {open, searchText} = this.state;
         const {clearSearch, filter, noResults, someSelected} =
@@ -599,6 +600,7 @@ export default class MultiSelect extends React.Component<Props, State> {
                 }}
                 aria-invalid={ariaInvalid}
                 aria-required={ariaRequired}
+                disabled={disabled}
             />
         );
     }
diff --git a/packages/wonder-blocks-dropdown/src/components/single-select.tsx b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
index a599ab2a4..f65d92b9b 100644
--- a/packages/wonder-blocks-dropdown/src/components/single-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
@@ -448,6 +448,7 @@ export default class SingleSelect extends React.Component<Props, State> {
             style,
             "aria-invalid": ariaInvalid,
             "aria-required": ariaRequired,
+            disabled,
         } = this.props;
         const {searchText} = this.state;
         const allChildren = React.Children.toArray(children).filter(Boolean);
@@ -484,6 +485,7 @@ export default class SingleSelect extends React.Component<Props, State> {
                 labels={labels}
                 aria-invalid={ariaInvalid}
                 aria-required={ariaRequired}
+                disabled={disabled}
             />
         );
     }