diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 6a31798544f2..039160559f40 100644 --- 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 index dd7ab45b6ba4..ecdbdcaef938 100644 --- 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 `` 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 index 86d991225fb3..966f524a96ca 100644 --- 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 */ @@ -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