feat(Select): default arrow key handling to focus items

Author: adamviktora

packages/react-core/src/components/Select/Select.tsx

@@ -62,6 +62,10 @@ export interface SelectProps extends MenuProps, OUIAProps {
   onOpenChange?: (isOpen: boolean) => void;
   /** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
   onOpenChangeKeys?: string[];
+  /** Custom callback to override the default behaviour when pressing up/down arrows. Default is focusing the menu items (first item on arrow down, last item on arrow up). */
+  onArrowUpDownKeyDown?: (event: KeyboardEvent) => void;
+  /** Indicates that the Select is used as a typeahead (combobox). Focus won't shift to menu items when pressing up/down arrows. */
+  isTypeahead?: boolean;
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
   /** @hide Forwarded ref */
@@ -95,6 +99,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   shouldFocusFirstItemOnOpen = false,
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
+  onArrowUpDownKeyDown,
+  isTypeahead,
   isPlain,
   innerRef,
   zIndex = 9999,
@@ -131,6 +137,21 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   }, [isOpen]);
 
   React.useEffect(() => {
+    const onArrowUpDownKeyDownDefault = (event: KeyboardEvent) => {
+      event.preventDefault();
+
+      let listItem: HTMLLIElement;
+      if (event.key === 'ArrowDown') {
+        listItem = menuRef.current?.querySelector('li');
+      } else {
+        const allItems = menuRef.current?.querySelectorAll('li');
+        listItem = allItems ? allItems[allItems.length - 1] : null;
+      }
+
+      const focusableElement = listItem?.querySelector('button:not(:disabled),input:not(:disabled)');
+      focusableElement && (focusableElement as HTMLElement).focus();
+    };
+
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
       if (
@@ -144,6 +165,14 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
           toggleRef.current?.focus();
         }
       }
+
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        if (onArrowUpDownKeyDown) {
+          onArrowUpDownKeyDown(event);
+        } else if (!isTypeahead) {
+          onArrowUpDownKeyDownDefault(event);
+        }
+      }
     };
 
     const handleClick = (event: MouseEvent) => {
@@ -168,6 +197,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     toggleRef,
     onOpenChange,
     onOpenChangeKeys,
+    onArrowUpDownKeyDown,
     shouldPreventScrollOnItemFocus,
     shouldFocusFirstItemOnOpen,
     focusTimeoutDelay

packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -247,7 +247,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      isTypeahead
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (

packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -241,7 +241,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      isTypeahead
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-checkbox-listbox">
         {selectOptions.map((option, index) => (

packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -260,7 +260,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      isTypeahead
     >
       <SelectList isAriaMultiselectable id="select-multi-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

packages/react-core/src/components/Select/examples/SelectTypeahead.tsx

@@ -244,7 +244,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      isTypeahead
     >
       <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (

packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -251,7 +251,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      isTypeahead
     >
       <SelectList id="select-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx

@@ -320,7 +320,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      isTypeahead
       ref={innerRef}
       {...props}
     >

packages/react-templates/src/components/Select/TypeaheadSelect.tsx

@@ -361,7 +361,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      shouldFocusFirstItemOnOpen={false}
+      isTypeahead
       ref={innerRef}
       {...props}
     >