feat(menu): add openMenuOnArrows option to allow disabling arrow keys to open the menu

Author: Julusian

packages/react-select/src/Select.tsx

@@ -248,6 +248,8 @@ export interface Props<
   openMenuOnFocus: boolean;
   /** Allows control of whether the menu is opened when the Select is clicked */
   openMenuOnClick: boolean;
+  /** Allows control of whether the menu is opened on up and down arrows */
+  openMenuOnArrows: boolean;
   /** Array of options that populate the select menu */
   options: OptionsOrGroups<Option, Group>;
   /** Number of options to jump in menu when page{up|down} keys are used */
@@ -310,6 +312,7 @@ export const defaultProps = {
   noOptionsMessage: () => 'No options',
   openMenuOnFocus: false,
   openMenuOnClick: true,
+  openMenuOnArrows: true,
   options: [],
   pageSize: 5,
   placeholder: 'Select...',
@@ -1565,6 +1568,7 @@ export default class Select<
       onKeyDown,
       tabSelectsValue,
       openMenuOnFocus,
+      openMenuOnArrows,
     } = this.props;
     const { focusedOption, focusedValue, selectValue } = this.state;
 
@@ -1657,15 +1661,20 @@ export default class Select<
         this.selectOption(focusedOption);
         break;
       case 'ArrowUp':
+        console.log('up', menuIsOpen);
         if (menuIsOpen) {
           this.focusOption('up');
+        } else if (!openMenuOnArrows) {
+          return;
         } else {
           this.openMenu('last');
         }
         break;
       case 'ArrowDown':
         if (menuIsOpen) {
           this.focusOption('down');
+        } else if (!openMenuOnArrows) {
+          return;
         } else {
           this.openMenu('first');
         }