feat(react): add option to not automatically scroll Tab(s) into view

Co-authored-by: Garrett Brustkern <gbrustke@cisco.com> Co-authored-by: James Catalano <35548103+jcatalan-cisco@users.noreply.github.com>
momentum-design · Nov 5, 2020 · 552669c · 552669c
1 parent 4efa074
commit 552669c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/react/src/lib/Tab/index.js b/react/src/lib/Tab/index.js
@@ -4,9 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 class Tab extends React.PureComponent {
-
   componentDidUpdate() {
-    this.props.focus && this.tabLink.focus();
+    this.props.focus && !this.props.preventFocus && this.tabLink.focus();
   }
 
   render() {
@@ -36,9 +35,9 @@ class Tab extends React.PureComponent {
         <a
           ref={ref => (this.tabLink = ref)}
           role={role}
-          href='javascript:void(0)'
           onKeyDown={onKeyDown}
-          onClick={onPress}
+          href="#"
+          onClick={(e) => {e.preventDefault(); onPress(e)}}
           tabIndex={focus ? 0 : -1}
           aria-current={active}
           >
@@ -60,6 +59,8 @@ Tab.propTypes = {
   disabled: PropTypes.bool,
   /** @prop Specifies if Tab should automatically get focus when page loads | false */
   focus: PropTypes.bool,
+  /** @prop Prevent focusing the Tab (which would scroll it into view if not already) when selected | false */
+  preventFocus: PropTypes.bool,
   /** @prop Tab Heading Text */
   heading: PropTypes.string.isRequired,
   /** @prop Currently unused prop myKey | 0 */
@@ -78,6 +79,7 @@ Tab.defaultProps = {
   className: '',
   disabled: false,
   focus: false,
+  preventFocus: false,
   myKey: 0,
   onKeyDown: null,
   onPress: null,

diff --git a/react/src/lib/Tab/tests/__snapshots__/index.spec.js.snap b/react/src/lib/Tab/tests/__snapshots__/index.spec.js.snap
@@ -13,6 +13,7 @@ ShallowWrapper {
     myKey={0}
     onKeyDown={null}
     onPress={null}
+    preventFocus={false}
     role="tab"
   />,
   Symbol(enzyme.__renderer__): Object {
@@ -31,8 +32,8 @@ ShallowWrapper {
     "props": Object {
       "children": <a
         aria-current={false}
-        href="javascript:void(0)"
-        onClick={null}
+        href="#"
+        onClick={[Function]}
         onKeyDown={null}
         role="tab"
         tabIndex={-1}
@@ -50,8 +51,8 @@ ShallowWrapper {
       "props": Object {
         "aria-current": false,
         "children": "test",
-        "href": "javascript:void(0)",
-        "onClick": null,
+        "href": "#",
+        "onClick": [Function],
         "onKeyDown": null,
         "role": "tab",
         "tabIndex": -1,
@@ -70,8 +71,8 @@ ShallowWrapper {
       "props": Object {
         "children": <a
           aria-current={false}
-          href="javascript:void(0)"
-          onClick={null}
+          href="#"
+          onClick={[Function]}
           onKeyDown={null}
           role="tab"
           tabIndex={-1}
@@ -89,8 +90,8 @@ ShallowWrapper {
         "props": Object {
           "aria-current": false,
           "children": "test",
-          "href": "javascript:void(0)",
-          "onClick": null,
+          "href": "#",
+          "onClick": [Function],
           "onKeyDown": null,
           "role": "tab",
           "tabIndex": -1,

diff --git a/react/src/lib/Tab/tests/index.spec.js b/react/src/lib/Tab/tests/index.spec.js
@@ -36,7 +36,7 @@ describe('tests for <Tab />', () => {
   it('should handle onClick event', () => {
     let count = 0;
     const countUp = () => count++;
-    const container = shallow(<Tab heading="test" onPress={countUp} />);
+    const container = mount(<Tab heading="test" onPress={countUp} />);
 
     container.find('a').simulate('click');
     expect(count).toEqual(1);

diff --git a/react/src/lib/TabList/tests/__snapshots__/index.spec.js.snap b/react/src/lib/TabList/tests/__snapshots__/index.spec.js.snap
@@ -17,6 +17,7 @@ ShallowWrapper {
       myKey={0}
       onKeyDown={null}
       onPress={null}
+      preventFocus={false}
       role="tab"
     />
   </TabList>,
@@ -45,6 +46,7 @@ ShallowWrapper {
           myKey={0}
           onKeyDown={[Function]}
           onPress={[Function]}
+          preventFocus={false}
           refName="navLink"
           role="tab"
         />,
@@ -68,6 +70,7 @@ ShallowWrapper {
           "myKey": 0,
           "onKeyDown": [Function],
           "onPress": [Function],
+          "preventFocus": false,
           "refName": "navLink",
           "role": "tab",
         },
@@ -95,6 +98,7 @@ ShallowWrapper {
             myKey={0}
             onKeyDown={[Function]}
             onPress={[Function]}
+            preventFocus={false}
             refName="navLink"
             role="tab"
           />,
@@ -118,6 +122,7 @@ ShallowWrapper {
             "myKey": 0,
             "onKeyDown": [Function],
             "onPress": [Function],
+            "preventFocus": false,
             "refName": "navLink",
             "role": "tab",
           },