Disable keyboard interactions for DropdownCore if component is disabled

.changeset/curvy-frogs-listen.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-dropdown": patch
+---
+
+SingleSelect and MultiSelect: Disable keyboard interactions to open the select if the `disabled` prop is set to `true`

__docs__/wonder-blocks-dropdown/single-select.stories.tsx

@@ -343,9 +343,8 @@ export const LongOptionLabels: StoryComponentType = {
  * remains focusable while communicating to screen readers that it is disabled.
  */
 export const Disabled: StoryComponentType = {
-    render: (args) => (
+    render: () => (
         <SingleSelect
-            {...args}
             placeholder="Choose a fruit"
             onChange={() => {}}
             selectedValue=""

packages/wonder-blocks-dropdown/src/components/__tests__/dropdown-core.test.tsx

@@ -772,4 +772,80 @@ describe("DropdownCore", () => {
             expect(container).toHaveTextContent("3 items");
         });
     });
+
+    describe("onOpenChanged", () => {
+        it("Should be triggered when the down key is pressed and the menu is closed", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={false}
+                    // mock the opener elements
+                    opener={<button />}
+                    onOpenChanged={onOpenMock}
+                />,
+            );
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(1);
+            expect(onOpenMock).toHaveBeenCalledWith(true);
+        });
+
+        it("Should not be triggered when the dropdown is disabled and the down key is pressed and the menu is closed", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={false}
+                    // mock the opener elements
+                    opener={<button />}
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                />,
+            );
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+    });
 });

packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx

@@ -5,7 +5,7 @@ import {userEvent} from "@testing-library/user-event";
 import SelectOpener from "../select-opener";
 
 describe("SelectOpener", () => {
-    describe("onClick", () => {
+    describe("onOpenChanged", () => {
         const children = "text";
         it("should trigger using the mouse", async () => {
             // Arrange
@@ -111,5 +111,110 @@ describe("SelectOpener", () => {
             // Assert
             expect(onOpenMock).toHaveBeenCalledTimes(1);
         });
+
+        it("should not trigger using the mouse if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            await userEvent.click(await screen.findByRole("button"));
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+
+        it("should not trigger by pressing {Space} if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: " ",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: " ",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+
+        it("should not trigger by pressing {Enter} if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // NOTE: We need to trigger multiple events to simulate the browser
+            // behavior of pressing Enter on a button. By default, browsers will
+            // trigger a click event on keyDown, but we need to trigger it on
+            // keyUp.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: "Enter",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
     });
 });

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}
             >

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}
             />
         );
     }

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}
             />
         );
     }