feat(Tabs): add control for autoscroll on component rerender (#7410)

* feat(Tabs): add control for autoscroll on component rerender * chore: update snapshots Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Dec 8, 2020 · 5fcbf46 · 5fcbf46
1 parent 2a7e3e1
commit 5fcbf46
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5080,6 +5080,7 @@ Map {
   },
   "Tabs" => Object {
     "defaultProps": Object {
+      "scrollIntoView": true,
       "selected": 0,
       "selectionMode": "automatic",
       "type": "default",
@@ -5106,6 +5107,9 @@ Map {
       "onSelectionChange": Object {
         "type": "func",
       },
+      "scrollIntoView": Object {
+        "type": "bool",
+      },
       "selected": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
@@ -43,6 +43,10 @@ const props = {
       'The className for the child `<TabContent>` components',
       'tab-content'
     ),
+    scrollIntoView: boolean(
+      'Scroll to selected tab on component rerender (scrollIntoView)',
+      true
+    ),
     selectionMode: select(
       'Selection mode (selectionMode)',
       selectionModes,

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -59,6 +59,12 @@ export default class Tabs extends React.Component {
      */
     onSelectionChange: PropTypes.func,
 
+    /**
+     * Choose whether or not to automatically scroll to newly selected tabs
+     * on component rerender
+     */
+    scrollIntoView: PropTypes.bool,
+
     /**
      * Optionally provide an index for the currently selected <Tab>
      */
@@ -82,6 +88,7 @@ export default class Tabs extends React.Component {
 
   static defaultProps = {
     type: 'default',
+    scrollIntoView: true,
     selected: 0,
     selectionMode: 'automatic',
   };
@@ -205,7 +212,7 @@ export default class Tabs extends React.Component {
       });
     }
 
-    if (prevState.selected !== selected) {
+    if (this.props.scrollIntoView && prevState.selected !== selected) {
       this.getTabAt(selected)?.tabAnchor?.scrollIntoView({
         block: 'nearest',
         inline: 'nearest',
@@ -379,6 +386,7 @@ export default class Tabs extends React.Component {
       type,
       light,
       onSelectionChange,
+      scrollIntoView, // eslint-disable-line no-unused-vars
       selectionMode, // eslint-disable-line no-unused-vars
       tabContentClassName,
       ...other