feat: New prop to disable up/down arrow keys for changing tabs (#368)

Author: yesquesasi

README.md

@@ -114,6 +114,12 @@ Provide a custom class name for disabled tabs.
 
 > This option can also be set directly at the `<Tab />` component.
 
+#### disableUpDownKeys: `bool`
+
+> default: `false`
+
+Disable up & down arrow keys to change tabs.
+
 #### domRef: `(node: ?HTMLElement) => void`
 
 > default: `null`

src/components/Tabs.js

@@ -18,6 +18,7 @@ export default class Tabs extends Component {
     selectedIndex: null,
     defaultIndex: null,
     environment: null,
+    disableUpDownKeys: false,
   };
 
   static propTypes = {
@@ -31,6 +32,7 @@ export default class Tabs extends Component {
     defaultFocus: PropTypes.bool,
     defaultIndex: PropTypes.number,
     disabledTabClassName: PropTypes.string,
+    disableUpDownKeys: PropTypes.bool,
     domRef: PropTypes.func,
     forceRenderTabPanel: PropTypes.bool,
     onSelect: onSelectPropType,

src/components/UncontrolledTabs.js

@@ -56,6 +56,7 @@ export default class UncontrolledTabs extends Component {
       PropTypes.object,
     ]),
     disabledTabClassName: PropTypes.string,
+    disableUpDownKeys: PropTypes.bool,
     domRef: PropTypes.func,
     focus: PropTypes.bool,
     forceRenderTabPanel: PropTypes.bool,
@@ -259,7 +260,7 @@ export default class UncontrolledTabs extends Component {
   }
 
   handleKeyDown = (e) => {
-    const { direction } = this.props;
+    const { direction, disableUpDownKeys } = this.props;
     if (this.isTabFromContainer(e.target)) {
       let { selectedIndex: index } = this.props;
       let preventDefault = false;
@@ -271,17 +272,17 @@ export default class UncontrolledTabs extends Component {
         this.handleClick(e);
       }
 
-      if (e.keyCode === 37 || e.keyCode === 38) {
-        // Select next tab to the left
+      if (e.keyCode === 37 || (!disableUpDownKeys && e.keyCode === 38)) {
+        // Select next tab to the left, validate if up arrow is not disabled
         if (direction === 'rtl') {
           index = this.getNextTab(index);
         } else {
           index = this.getPrevTab(index);
         }
         preventDefault = true;
         useSelectedIndex = true;
-      } else if (e.keyCode === 39 || e.keyCode === 40) {
-        // Select next tab to the right
+      } else if (e.keyCode === 39 || (!disableUpDownKeys && e.keyCode === 40)) {
+        // Select next tab to the right, validate if down arrow is not disabled
         if (direction === 'rtl') {
           index = this.getPrevTab(index);
         } else {
@@ -368,6 +369,7 @@ export default class UncontrolledTabs extends Component {
       selectedTabClassName, // unused
       selectedTabPanelClassName, // unused
       environment, // unused
+      disableUpDownKeys, // unused
       ...attributes
     } = this.props;
 

src/components/__tests__/Tabs-test.js

@@ -502,4 +502,43 @@ describe('<Tabs />', () => {
       </Tabs>,
     );
   });
+
+  test('should change tabs when arrow up/down is pressed', () => {
+    render(createTabs());
+    const firstTab = screen.getByTestId('tab1');
+    const secondTab = screen.getByTestId('tab2');
+
+    userEvent.tab();
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    userEvent.type(firstTab, '{arrowdown}');
+    expect(secondTab).toHaveFocus();
+    assertTabSelected(2);
+
+    userEvent.type(secondTab, '{arrowup}');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+  });
+
+  test('should not change tabs when arrow up/down is pressed and disableUpDownKeys is passed', () => {
+    render(
+      createTabs({
+        disableUpDownKeys: true,
+      }),
+    );
+    const firstTab = screen.getByTestId('tab1');
+
+    userEvent.tab();
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    userEvent.type(firstTab, '{arrowdown}');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+
+    userEvent.type(firstTab, '{arrowup}');
+    expect(firstTab).toHaveFocus();
+    assertTabSelected(1);
+  });
 });