fix: onKeyDown property was recieving incorrect first parameter of event.type instead of event; new property menuId added - this is

what is referenced as the value for the input control's aria-controls and aria-owns attributes

Author: based-ghost

.eslintrc

@@ -1,12 +1,12 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/recommended"
   ],
   "plugins": [
+    "react",
     "@typescript-eslint",
-    "react-hooks",
     "prettier"
   ],
   "env": {
@@ -39,7 +39,6 @@
   },
   "settings": {
     "react": {
-      "pragma": "React",
       "version": "detect"
     }
   }

README.md

@@ -114,8 +114,9 @@ All properties are technically optional (with a few having default values). Very
 
 | Property | Type | Default | Description
 :---|:---|:---|:---
-| `inputId`| string | `undefined` | The id of the autosize search input
-|`selectId`| string | `undefined` | The id of the parent div
+| `inputId`| string | `undefined` | The id of the autosize search input control
+|`selectId`| string | `undefined` | The id of the parent select container element
+|`menuId`| string | `undefined` | The id of the menu container element
 |`ariaLabel`| string | `undefined` | Aria label (for assistive tech)
 |`isMulti`| bool | `false` | Does the control allow for multiple selections (defaults to single-value mode)
 |`async`| bool | `false` | Is the component in 'async' mode - when in 'async' mode, updates to the input search value will NOT cause the effect `useMenuOptions` to execute (this effect parses `options` into stateful value `menuOptions`)

__tests__/AutosizeInput.test.tsx

@@ -30,6 +30,7 @@ const createAutosizeInputProps = () => {
   const props: AutosizeInputProps = {
     inputValue: '',
     readOnly: false,
+    menuOpen: false,
     onBlur: onBlurSpy,
     onFocus: onFocusSpy,
     onChange: onChangeSpy,

__tests__/Select.test.tsx

@@ -34,74 +34,34 @@ test('container elements have static className value (enables styling via classi
   expect(getByTestId(MENU_CONTAINER_TESTID!)).toHaveClass(MENU_CONTAINER_CLS);
 });
 
-test('id attributes are added to DOM if defined ("selectId" and "inputId" props)', async () => {
-  const inputId = 'test-input-id';
-  const selectId = 'test-select-id';
-  const props = { inputId, selectId };
+test('id attributes are added to DOM if defined ("menuId", "selectId", "inputId" props)', async () => {
+  const props = {
+    menuId: 'test-menu-id',
+    inputId: 'test-input-id',
+    selectId: 'test-select-id'
+  };
   const { getByTestId } = renderSelect(props);
-
-  expect(getByTestId(SELECT_CONTAINER_TESTID!)).toHaveAttribute('id', selectId);
-  expect(getByTestId(AUTOSIZE_INPUT_TESTID!)).toHaveAttribute('id', inputId);
+  expect(getByTestId(MENU_CONTAINER_TESTID!)).toHaveAttribute('id', props.menuId);
+  expect(getByTestId(AUTOSIZE_INPUT_TESTID!)).toHaveAttribute('id', props.inputId);
+  expect(getByTestId(SELECT_CONTAINER_TESTID!)).toHaveAttribute('id', props.selectId);
 });
 
-// NOTE: element.not.toBeVisible() relies on access to CSS style sheets to check 'display: none;' - CSS-in-JS breaks this
-/* test('menu is not visible by default', async () => {
-  const { getByTestId } = renderSelect();
-  expect(getByTestId(MENU_CONTAINER_TESTID!)).not.toBeVisible();
-}); */
-
-// NOTE: element.toBeVisible() relies on access to CSS style sheets to check 'display: none;' - CSS-in-JS breaks this
-/* test('menu is visible after the "mouseDown" event is fired on the control container', async () => {
-  const { getByTestId } = renderSelect();
-
-  fireEvent.mouseDown(getByTestId(CONTROL_CONTAINER_TESTID!));
-  expect(getByTestId(MENU_CONTAINER_TESTID!)).toBeVisible();
-}); */
-
 test('"onInputFocus" callback should be fired when input is focused (if a defined function)', async () => {
   const onFocusSpy = jest.fn();
   const props = { onInputFocus: onFocusSpy };
   const { getByTestId } = renderSelect(props);
-
   fireEvent.focus(getByTestId(AUTOSIZE_INPUT_TESTID!));
   expect(onFocusSpy).toBeCalled();
 });
 
-// NOTE: element.not.toBeVisible() relies on access to CSS style sheets to check 'display: none;' - CSS-in-JS breaks this
-/* test('when "openMenuOnFocus" = true (the default value), then onFocus of input should open the menu', async () => {
-  const props = { openMenuOnFocus: true };
-  const { getByTestId } = renderSelect(props);
-
-  fireEvent.focus(getByTestId(AUTOSIZE_INPUT_TESTID!));
-  expect(getByTestId(MENU_CONTAINER_TESTID!)).toBeVisible();
-}); */
-
 test('"onInputBlur" callback should be fired on blur (if a defined function)', async () => {
   const onBlurSpy = jest.fn();
   const props = { onInputBlur: onBlurSpy };
   const { getByTestId } = renderSelect(props);
-
   fireEvent.blur(getByTestId(AUTOSIZE_INPUT_TESTID!));
   expect(onBlurSpy).toBeCalled();
 });
 
-// NOTE: element.not.toBeVisible() relies on access to CSS style sheets to check 'display: none;' - CSS-in-JS breaks this
-/* test('when "isDisabled" = true, the DOM elements render as expected to prevent user interaction', async () => {
-  const onFocusSpy = jest.fn();
-  const props = {
-    isDisabled: true,
-    onInputFocus: onFocusSpy,
-  };
-
-  const { getByTestId } = renderSelect(props);
-
-  // mouseDown event should exit function when disabled (should not open the menu/focus input - which it normally would)
-  // onFocus callback should not run with mouseDown on control
-  fireEvent.mouseDown(getByTestId(CONTROL_CONTAINER_TESTID!));
-  expect(getByTestId(MENU_CONTAINER_TESTID!)).not.toBeVisible();
-  expect(onFocusSpy).not.toBeCalled();
-}); */
-
 test('toggling the menu to open/close fires corresponding callbacks "onMenuOpen" and "onMenuClose" (if they are defined functions)', async () => {
   const onMenuOpenSpy = jest.fn();
   const onMenuCloseSpy = jest.fn();
@@ -124,4 +84,21 @@ test('toggling the menu to open/close fires corresponding callbacks "onMenuOpen"
 test('When "lazyLoadMenu" property = true, then menu components are only rendered in DOM when "menuOpen" state = true', async () => {
   const { queryByTestId } = renderSelect({ lazyLoadMenu: true });
   expect(queryByTestId(MENU_CONTAINER_TESTID!)).toBeNull();
-});
+});
+
+// NOTE: element.not.toBeVisible() relies on access to CSS style sheets to check 'display: none;' - CSS-in-JS breaks this
+/* test('when "isDisabled" = true, the DOM elements render as expected to prevent user interaction', async () => {
+  const onFocusSpy = jest.fn();
+  const props = {
+    isDisabled: true,
+    onInputFocus: onFocusSpy,
+  };
+
+  const { getByTestId } = renderSelect(props);
+
+  // mouseDown event should exit function when disabled (should not open the menu/focus input - which it normally would)
+  // onFocus callback should not run with mouseDown on control
+  fireEvent.mouseDown(getByTestId(CONTROL_CONTAINER_TESTID!));
+  expect(getByTestId(MENU_CONTAINER_TESTID!)).not.toBeVisible();
+  expect(onFocusSpy).not.toBeCalled();
+}); */

package.json

@@ -48,14 +48,14 @@
   ],
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.2",
+    "@babel/core": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-typescript": "^9.0.2",
+    "@rollup/plugin-typescript": "^10.0.1",
     "@storybook/addon-storysource": "^6.5.13",
     "@storybook/addons": "^6.5.13",
     "@storybook/builder-webpack5": "^6.5.13",
@@ -71,8 +71,8 @@
     "@types/react-dom": "^18.0.9",
     "@types/react-window": "^1.8.5",
     "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.44.0",
-    "@typescript-eslint/parser": "^5.44.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "babel-jest": "^29.3.1",
     "babel-loader": "^9.1.0",
     "babel-plugin-styled-components": "^2.0.7",
@@ -95,7 +95,7 @@
     "react-toastify": "^9.1.1",
     "react-window": "^1.8.8",
     "rimraf": "^3.0.2",
-    "rollup": "^3.4.0",
+    "rollup": "^3.5.0",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.3.6",
     "typescript": "^4.9.3",
@@ -123,6 +123,6 @@
     "chromatic": "chromatic --force-rebuild --auto-accept-changes"
   },
   "dependencies": {
-    "@babel/runtime": "^7.20.1"
+    "@babel/runtime": "^7.20.6"
   }
 }

src/Select.tsx

@@ -21,15 +21,16 @@ import {
   FUNCTIONS,
   EMPTY_ARRAY,
   DEFAULT_THEME,
-  SELECT_WRAPPER_ATTRS,
   PAGE_SIZE_DEFAULT,
   PLACEHOLDER_DEFAULT,
   LOADING_MSG_DEFAULT,
+  SELECT_CONTAINER_CLS,
   CONTROL_CONTAINER_CLS,
   FOCUSED_OPTION_DEFAULT,
   NO_OPTIONS_MSG_DEFAULT,
   MENU_ITEM_SIZE_DEFAULT,
   MENU_MAX_HEIGHT_DEFAULT,
+  SELECT_CONTAINER_TESTID,
   CONTROL_CONTAINER_TESTID
 } from './constants';
 import type {
@@ -56,9 +57,10 @@ import { isBoolean, isFunction, isPlainObject, mergeDeep, suppressEvent, normali
 
 type SelectProps = Readonly<{
   async?: boolean;
+  menuId?: string;
   inputId?: string;
-  pageSize?: number;
   selectId?: string;
+  pageSize?: number;
   isMulti?: boolean;
   ariaLabel?: string;
   required?: boolean;
@@ -127,7 +129,7 @@ interface ControlWrapperProps extends Pick<SelectProps, 'isInvalid' | 'isDisable
   isFocused: boolean;
 }
 
-const SelectWrapper = styled.div.attrs(SELECT_WRAPPER_ATTRS)`
+const SelectWrapper = styled.div`
   position: relative;
   box-sizing: border-box;
   ${({ theme }) => theme.select.css}
@@ -180,6 +182,7 @@ const ControlWrapper = styled.div<ControlWrapperProps>`
 const Select = forwardRef<SelectRef, SelectProps>((
   {
     async,
+    menuId,
     isMulti,
     inputId,
     selectId,
@@ -374,7 +377,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [isMulti, closeMenuOnSelect, blurInputOnSelect, removeSelectedOption]);
 
   /**
-   * useImperativeHandle.
+   * `React.useImperativeHandle`
+   *
    * Exposed API methods/properties available on a ref instance of this Select.tsx component.
    * Dependency list passed as the third param to re-create the handle when one of them updates.
    */
@@ -406,15 +410,19 @@ const Select = forwardRef<SelectRef, SelectProps>((
   );
 
   /**
-   * useMountEffect
-   * If autoFocus = true, focus the control following initial mount.
+   * `useMountEffect`
+   *
+   * If 'autoFocus' true, focus the control following initial mount
    */
   useMountEffect(() => {
-    autoFocus && focusInput();
+    if (autoFocus) {
+      focusInput();
+    }
   });
 
   /**
-   * useEffect
+   * `React.useEffect`
+   *
    * If 'onSearchChange' function is defined, run as callback when the stateful debouncedInputValue
    * updates check if onChangeEvtValue ref is set true, which indicates the inputValue change was triggered by input change event
    */
@@ -426,7 +434,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [onSearchChangeFn, onSearchChangeIsFn, debouncedInputValue]);
 
   /**
-   * useUpdateEffect
+   * `useUpdateEffect`
+   *
    * Handle passing 'selectedOption' value(s) to onOptionChange callback function prop (if defined)
    */
   useUpdateEffect(() => {
@@ -442,7 +451,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
   }, [onOptionChangeFn, onOptionChangeIsFn, isMulti, selectedOption]);
 
   /**
-   * useUpdateEffect
+   * `useUpdateEffect`
+   *
    * Handle clearing focused option if menuOptions array has 0 length;
    * Handle menuOptions changes - conditionally focus first option and do scroll to first option;
    * Handle reseting scroll pos to first item after the previous search returned zero results (use prevMenuOptionsLen)
@@ -472,7 +482,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
     }
   };
 
-  // Only Multiselect mode supports value focusing (ArrowRight || ArrowLeft)
+  // only Multiselect mode supports value focusing (ArrowRight || ArrowLeft)
   const focusValueOnArrowKey = (key: string): void => {
     if (!hasSelectedOptions) return;
 
@@ -492,7 +502,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
         : 0;
     }
 
-    const nextFocusedVal = focusedIdx >= 0
+    const nextFocusedVal = focusedIdx > -1
       ? selectedOption[focusedIdx].value!
       : null;
 
@@ -533,8 +543,8 @@ const Select = forwardRef<SelectRef, SelectProps>((
   const handleOnKeyDown = (e: KeyboardEvent<HTMLElement>): void => {
     if (isDisabled) return;
 
-    if (isFunction(onKeyDown)) {
-      onKeyDown(e.key, inputValue, focusedOption);
+    if (onKeyDown) {
+      onKeyDown(e, inputValue, focusedOption);
       if (e.defaultPrevented) return;
     }
 
@@ -563,7 +573,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
         focusOptionOnArrowKey(OptionIndexEnum.PAGEDOWN);
         break;
       }
-      // Handle spacebar keydown events
+      // handle spacebar keydown events
       case ' ': {
         if (inputValue) return;
 
@@ -685,15 +695,14 @@ const Select = forwardRef<SelectRef, SelectProps>((
 
   const flexValueWrapper = !!isMulti && hasSelectedOptions;
   const showClear = !!isClearable && !isDisabled && hasSelectedOptions;
-  const inputReadOnly = isDisabled || !isSearchable || !!focusedMultiValue;
 
   return (
     <ThemeProvider theme={theme}>
       <SelectWrapper
         id={selectId}
-        aria-controls={inputId}
-        aria-expanded={menuOpen}
         onKeyDown={handleOnKeyDown}
+        className={SELECT_CONTAINER_CLS}
+        data-testid={SELECT_CONTAINER_TESTID}
       >
         <ControlWrapper
           ref={controlRef}
@@ -719,15 +728,18 @@ const Select = forwardRef<SelectRef, SelectProps>((
             <AutosizeInput
               id={inputId}
               ref={inputRef}
+              menuId={menuId}
+              menuOpen={menuOpen}
               required={required}
               ariaLabel={ariaLabel}
+              isInvalid={isInvalid}
               inputValue={inputValue}
-              readOnly={inputReadOnly}
               onBlur={handleOnInputBlur}
               onFocus={handleOnInputFocus}
               onChange={handleOnInputChange}
               ariaLabelledBy={ariaLabelledBy}
               hasSelectedOptions={hasSelectedOptions}
+              readOnly={!isSearchable || !!focusedMultiValue}
             />
           </ValueWrapper>
           <IndicatorIcons
@@ -744,6 +756,7 @@ const Select = forwardRef<SelectRef, SelectProps>((
           />
         </ControlWrapper>
         <Menu
+          id={menuId}
           menuRef={menuRef}
           menuOpen={menuOpen}
           isLoading={isLoading}