@khanacademy/wonder-blocks-dropdown 5.3.5 → 5.3.7

package/dist/index.js

@@ -20,7 +20,6 @@ var reactPopper = require('react-popper');
 var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var core = require('@popperjs/core');
 var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
-var reactRouter = require('react-router');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1305,11 +1304,12 @@ class DropdownCore extends React__namespace.Component {
       open,
       opener,
       style,
-      className
+      className,
+      disabled
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
-      onKeyDown: this.handleKeyDown,
-      onKeyUp: this.handleKeyUp,
+      onKeyDown: !disabled ? this.handleKeyDown : undefined,
+      onKeyUp: !disabled ? this.handleKeyUp : undefined,
       style: [styles$4.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
@@ -1660,16 +1660,37 @@ const styles$2 = aphrodite.StyleSheet.create({
 const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
 const StyledButton = wonderBlocksCore.addStyle("button");
 class SelectOpener extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
     this.handleClick = e => {
       const {
         open
       } = this.props;
       this.props.onOpenChanged(!open);
     };
+    this.handleKeyDown = e => {
+      const keyCode = e.key;
+      if (keyCode === "Enter" || keyCode === " ") {
+        this.setState({
+          pressed: true
+        });
+        e.preventDefault();
+      }
+    };
+    this.handleKeyUp = e => {
+      const keyCode = e.key;
+      if (keyCode === "Enter" || keyCode === " ") {
+        this.setState({
+          pressed: false
+        });
+        this.handleClick(e);
+      }
+    };
+    this.state = {
+      pressed: false
+    };
   }
-  renderClickableBehavior(router) {
+  render() {
     const _this$props = this.props,
       {
         children,
@@ -1682,40 +1703,29 @@ class SelectOpener extends React__namespace.Component {
         testId
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
-    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(router);
-    return React__namespace.createElement(ClickableBehavior, {
-      disabled: disabled,
-      onClick: this.handleClick
-    }, (state, childrenProps) => {
-      const stateStyles = _generateStyles(light, isPlaceholder, error);
-      const {
-        hovered,
-        focused,
-        pressed
-      } = state;
-      const iconColor = light ? disabled || pressed ? "currentColor" : tokens__namespace.color.white : disabled ? tokens__namespace.color.offBlack32 : tokens__namespace.color.offBlack64;
-      const style = [styles$1.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
-      return React__namespace.createElement(StyledButton, _extends({}, sharedProps, {
-        "aria-expanded": open ? "true" : "false",
-        "aria-haspopup": "listbox",
-        "data-testid": testId,
-        disabled: disabled,
-        id: id,
-        style: style,
-        type: "button"
-      }, childrenProps), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        style: styles$1.text
-      }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
-        icon: caretDownIcon__default["default"],
-        color: iconColor,
-        size: "small",
-        style: styles$1.caret,
-        "aria-hidden": "true"
-      }));
-    });
-  }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    const stateStyles = _generateStyles(light, isPlaceholder, error);
+    const iconColor = light ? disabled || error ? "currentColor" : tokens__namespace.color.white : disabled ? tokens__namespace.color.offBlack32 : tokens__namespace.color.offBlack64;
+    const style = [styles$1.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && this.state.pressed && stateStyles.pressed];
+    return React__namespace.createElement(StyledButton, _extends({}, sharedProps, {
+      "aria-disabled": disabled,
+      "aria-expanded": open ? "true" : "false",
+      "aria-haspopup": "listbox",
+      "data-testid": testId,
+      id: id,
+      style: style,
+      type: "button",
+      onClick: !disabled ? this.handleClick : undefined,
+      onKeyDown: !disabled ? this.handleKeyDown : undefined,
+      onKeyUp: !disabled ? this.handleKeyUp : undefined
+    }), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+      style: styles$1.text
+    }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+      icon: caretDownIcon__default["default"],
+      color: iconColor,
+      size: "small",
+      style: styles$1.caret,
+      "aria-hidden": "true"
+    }));
   }
 }
 SelectOpener.defaultProps = {
@@ -1764,61 +1774,91 @@ const _generateStyles = (light, placeholder, error) => {
   }
   let newStyles = {};
   if (light) {
+    const focusHoverStyling = {
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white,
+      borderWidth: tokens__namespace.spacing.xxxxSmall_2,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
+    const activePressedStyling = {
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight,
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.fadedBlue,
+      borderWidth: tokens__namespace.border.width.thin,
+      color: error ? tokens__namespace.color.offBlack64 : placeholder ? tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue) : tokens__namespace.color.fadedBlue,
+      backgroundColor: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.activeBlue
+    };
     newStyles = {
       default: {
         background: error ? tokens__namespace.color.fadedRed8 : "transparent",
-        color: placeholder ? tokens__namespace.color.white50 : tokens__namespace.color.white,
+        color: error ? tokens__namespace.color.offBlack64 : placeholder ? tokens__namespace.color.white50 : tokens__namespace.color.white,
         borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white50,
-        borderWidth: tokens__namespace.border.width.hairline
-      },
-      focus: {
-        borderColor: error ? tokens__namespace.color.fadedRed8 : tokens__namespace.color.white,
-        borderWidth: tokens__namespace.spacing.xxxxSmall_2,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
-      },
-      active: {
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight,
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.fadedBlue,
-        borderWidth: tokens__namespace.border.width.thin,
-        color: placeholder ? tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue) : tokens__namespace.color.fadedBlue,
-        backgroundColor: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.activeBlue
+        borderWidth: tokens__namespace.border.width.hairline,
+        ":hover:not([aria-disabled=true])": focusHoverStyling,
+        ["@media not (hover: hover)"]: {
+          ":hover:not([aria-disabled=true])": {
+            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.white50,
+            borderWidth: tokens__namespace.border.width.hairline,
+            paddingLeft: tokens__namespace.spacing.medium_16,
+            paddingRight: tokens__namespace.spacing.small_12
+          }
+        },
+        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+        ":active:not([aria-disabled=true])": activePressedStyling
       },
       disabled: {
         background: "transparent",
         borderColor: tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue),
         color: tokens.mix(tokens__namespace.color.white32, tokens__namespace.color.blue),
-        cursor: "auto"
-      }
+        cursor: "not-allowed",
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${tokens__namespace.color.offBlack32}, 0 0 0 3px ${tokens__namespace.color.fadedBlue}`
+        }
+      },
+      pressed: activePressedStyling
     };
   } else {
+    const focusHoverStyling = {
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.blue,
+      borderWidth: tokens__namespace.border.width.thin,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
+    const activePressedStyling = {
+      background: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.fadedBlue,
+      borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.activeBlue,
+      borderWidth: tokens__namespace.border.width.thin,
+      paddingLeft: adjustedPaddingLeft,
+      paddingRight: adjustedPaddingRight
+    };
     newStyles = {
       default: {
         background: error ? tokens__namespace.color.fadedRed8 : tokens__namespace.color.white,
         borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack16,
         borderWidth: tokens__namespace.border.width.hairline,
-        color: placeholder ? tokens__namespace.color.offBlack64 : tokens__namespace.color.offBlack
-      },
-      focus: {
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.blue,
-        borderWidth: tokens__namespace.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
-      },
-      active: {
-        background: error ? tokens__namespace.color.fadedRed : tokens__namespace.color.fadedBlue,
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.activeBlue,
-        borderWidth: tokens__namespace.border.width.thin,
-        paddingLeft: adjustedPaddingLeft,
-        paddingRight: adjustedPaddingRight
+        color: placeholder ? tokens__namespace.color.offBlack64 : tokens__namespace.color.offBlack,
+        ":hover:not([aria-disabled=true])": focusHoverStyling,
+        ["@media not (hover: hover)"]: {
+          ":hover:not([aria-disabled=true])": {
+            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack16,
+            borderWidth: tokens__namespace.border.width.hairline,
+            paddingLeft: tokens__namespace.spacing.medium_16,
+            paddingRight: tokens__namespace.spacing.small_12
+          }
+        },
+        ":focus-visible:not([aria-disabled=true])": focusHoverStyling,
+        ":active:not([aria-disabled=true])": activePressedStyling
       },
       disabled: {
         background: tokens__namespace.color.offWhite,
         borderColor: tokens__namespace.color.offBlack16,
         color: tokens__namespace.color.offBlack64,
-        cursor: "auto"
-      }
+        cursor: "not-allowed",
+        ":focus-visible": {
+          boxShadow: `0 0 0 1px ${tokens__namespace.color.white}, 0 0 0 3px ${tokens__namespace.color.offBlack32}`
+        }
+      },
+      pressed: activePressedStyling
     };
   }
   stateStyles[styleKey] = aphrodite.StyleSheet.create(newStyles);
@@ -1904,7 +1944,7 @@ class SingleSelect extends React__namespace.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   filterChildren(children) {
@@ -1971,7 +2011,8 @@ class SingleSelect extends React__namespace.Component {
       light,
       style,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       searchText
@@ -2000,7 +2041,8 @@ class SingleSelect extends React__namespace.Component {
       searchText: isFilterable ? searchText : "",
       labels: labels,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: disabled
     });
   }
 }
@@ -2104,7 +2146,7 @@ class MultiSelect extends React__namespace.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   componentDidUpdate(prevProps) {
@@ -2269,7 +2311,8 @@ class MultiSelect extends React__namespace.Component {
       children,
       isFilterable,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       open,
@@ -2308,7 +2351,8 @@ class MultiSelect extends React__namespace.Component {
         someResults: someSelected
       },
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: disabled
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.3.5",
+  "version": "5.3.7",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^3.3.6",
+    "@khanacademy/wonder-blocks-cell": "^3.3.7",
     "@khanacademy/wonder-blocks-clickable": "^4.2.2",
     "@khanacademy/wonder-blocks-core": "^6.4.1",
     "@khanacademy/wonder-blocks-icon": "^4.1.1",
-    "@khanacademy/wonder-blocks-layout": "^2.0.33",
-    "@khanacademy/wonder-blocks-modal": "^5.1.3",
-    "@khanacademy/wonder-blocks-search-field": "^2.2.14",
+    "@khanacademy/wonder-blocks-layout": "^2.1.0",
+    "@khanacademy/wonder-blocks-modal": "^5.1.4",
+    "@khanacademy/wonder-blocks-search-field": "^2.2.15",
     "@khanacademy/wonder-blocks-timing": "^5.0.0",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.12"

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

package/src/components/__tests__/multi-select.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-constant-condition */
 /* eslint-disable max-lines */
 import * as React from "react";
-import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import {render, screen, waitFor} from "@testing-library/react";
 import {
     userEvent as ue,
     PointerEventsCheckLevel,
@@ -1539,55 +1539,191 @@ describe("MultiSelect", () => {
         });
     });
 
-    describe("error state styles", () => {
-        it("should apply the error styles to the dropdown on hover", async () => {
+    describe("a11y > Focusable", () => {
+        it("should be focusable", () => {
             // Arrange
-            const {userEvent} = doRender(
+            doRender(
+                <MultiSelect onChange={jest.fn()} testId="select-focus-test">
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const multiSelect = screen.getByTestId("select-focus-test");
+            multiSelect.focus();
+
+            // Assert
+            expect(multiSelect).toHaveFocus();
+        });
+
+        it("should be focusable when disabled", () => {
+            // Arrange
+            doRender(
                 <MultiSelect
                     onChange={jest.fn()}
-                    error={true}
-                    testId="multiselect-error-hover"
+                    testId="select-focus-test"
+                    disabled={true}
                 >
-                    {[<OptionItem label="Banana" value="banana" />]}
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
                 </MultiSelect>,
             );
-            const dropdown = await screen.findByTestId(
-                "multiselect-error-hover",
-            );
 
             // Act
-            await userEvent.hover(dropdown);
+            const multiSelect = screen.getByTestId("select-focus-test");
+            multiSelect.focus();
 
             // Assert
-            expect(dropdown).toHaveStyle("border-color: #d92916");
-            expect(dropdown).toHaveStyle("border-width: 2px");
+            expect(multiSelect).toHaveFocus();
         });
+    });
 
-        it("should apply the error styles to the dropdown on mouse down", async () => {
+    describe("Disabled state", () => {
+        it("should set the `aria-disabled` attribute to `true` if `disabled` prop is `true`", () => {
             // Arrange
+
+            // Act
             doRender(
                 <MultiSelect
                     onChange={jest.fn()}
-                    error={true}
-                    testId="multiselect-error-active"
+                    testId="select-focus-test"
+                    disabled={true}
                 >
-                    {[<OptionItem label="Banana" value="banana" />]}
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
                 </MultiSelect>,
             );
-            const dropdown = await screen.findByTestId(
-                "multiselect-error-active",
+            const multiSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(multiSelect).toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("should not set the `disabled` attribute if `disabled` prop is `true` since `aria-disabled` is used instead", () => {
+            // Arrange
+
+            // Act
+            doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
             );
+            const multiSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(multiSelect).not.toHaveAttribute("disabled");
+        });
+
+        it("should not be opened if it is disabled and `open` prop is set to true", () => {
+            // Arrange
 
             // Act
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseDown(dropdown);
+            doRender(
+                <MultiSelect onChange={jest.fn()} disabled={true} opened={true}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
 
             // Assert
-            expect(dropdown).toHaveStyle("border-color: #d92916");
-            expect(dropdown).toHaveStyle("border-width: 2px");
-            expect(dropdown).toHaveStyle(
-                "background-color: rgb(243, 187, 180)",
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+
+    describe("a11y > Focusable", () => {
+        it("should be focusable", () => {
+            // Arrange
+            doRender(
+                <MultiSelect onChange={jest.fn()} testId="select-focus-test">
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const multiSelect = screen.getByTestId("select-focus-test");
+            multiSelect.focus();
+
+            // Assert
+            expect(multiSelect).toHaveFocus();
+        });
+
+        it("should be focusable when disabled", () => {
+            // Arrange
+            doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const multiSelect = screen.getByTestId("select-focus-test");
+            multiSelect.focus();
+
+            // Assert
+            expect(multiSelect).toHaveFocus();
+        });
+    });
+
+    describe("Disabled state", () => {
+        it("should set the `aria-disabled` attribute to `true` if `disabled` prop is `true`", () => {
+            // Arrange
+
+            // Act
+            doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
+            const multiSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(multiSelect).toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("should not set the `disabled` attribute if `disabled` prop is `true` since `aria-disabled` is used instead", () => {
+            // Arrange
+
+            // Act
+            doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
             );
+            const multiSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(multiSelect).not.toHaveAttribute("disabled");
         });
     });
 });