From ad43168065cc326895d6e1510823f659b14010c6 Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Mon, 4 Jun 2018 09:54:17 -0500 Subject: [PATCH 01/10] [Tabs] wip optimization of tabs for static label elements --- packages/material-ui/src/Tab/Tab.d.ts | 1 + packages/material-ui/src/Tab/Tab.js | 6 +++ packages/material-ui/src/Tabs/Tabs.d.ts | 1 + packages/material-ui/src/Tabs/Tabs.js | 72 +++++++++++++++---------- 4 files changed, 52 insertions(+), 28 deletions(-) diff --git a/packages/material-ui/src/Tab/Tab.d.ts b/packages/material-ui/src/Tab/Tab.d.ts index fb9cb6115e19e7..7f99771e8c44aa 100644 --- a/packages/material-ui/src/Tab/Tab.d.ts +++ b/packages/material-ui/src/Tab/Tab.d.ts @@ -11,6 +11,7 @@ export interface TabProps extends StandardProps, value: any) => void; onClick?: React.EventHandler; selected?: boolean; + staticLabel: boolean; style?: React.CSSProperties; textColor?: string | 'secondary' | 'primary' | 'inherit'; } diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js index 72f86ff8612912..7db90600c2a3b8 100644 --- a/packages/material-ui/src/Tab/Tab.js +++ b/packages/material-ui/src/Tab/Tab.js @@ -98,6 +98,7 @@ class Tab extends React.Component { } componentDidUpdate(prevProps, prevState) { + if (this.props.staticLabel) return; if (this.state.labelWrapped === prevState.labelWrapped) { /** * At certain text and tab lengths, a larger font size may wrap to two lines while the smaller @@ -242,6 +243,10 @@ Tab.propTypes = { * @ignore */ selected: PropTypes.bool, + /** + * @ignore + */ + staticLabel: PropTypes.bool, /** * @ignore */ @@ -254,6 +259,7 @@ Tab.propTypes = { Tab.defaultProps = { disabled: false, + staticLabel: false, textColor: 'inherit', }; diff --git a/packages/material-ui/src/Tabs/Tabs.d.ts b/packages/material-ui/src/Tabs/Tabs.d.ts index 854018ca0a3b82..7aada64fd6691c 100644 --- a/packages/material-ui/src/Tabs/Tabs.d.ts +++ b/packages/material-ui/src/Tabs/Tabs.d.ts @@ -14,6 +14,7 @@ export interface TabsProps scrollable?: boolean; ScrollButtonComponent?: React.ReactType; scrollButtons?: 'auto' | 'on' | 'off'; + staticLabel?: boolean; TabIndicatorProps?: Partial; textColor?: 'secondary' | 'primary' | 'inherit' | string; value: any; diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index b94af19febb00b..c87258e4336aef 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -54,6 +54,8 @@ class Tabs extends React.Component { showLeftScroll: false, showRightScroll: false, mounted: false, + tabsMeta: null, + tabMeta: null, }; componentDidMount() { @@ -123,32 +125,40 @@ class Tabs extends React.Component { return conditionalElements; }; - getTabsMeta = (value, direction) => { - let tabsMeta; - if (this.tabs) { - const rect = this.tabs.getBoundingClientRect(); - // create a new object with ClientRect class props + scrollLeft - tabsMeta = { - clientWidth: this.tabs ? this.tabs.clientWidth : 0, - scrollLeft: this.tabs ? this.tabs.scrollLeft : 0, - scrollLeftNormalized: this.tabs ? getNormalizedScrollLeft(this.tabs, direction) : 0, - scrollWidth: this.tabs ? this.tabs.scrollWidth : 0, - left: rect.left, - right: rect.right, - }; - } - - let tabMeta; - if (this.tabs && value !== false) { - const children = this.tabs.children[0].children; + getTabsMetaStaticLabel = refreshTabMeta => { + const { tabMeta, tabsMeta } = this.state; + if (refreshTabMeta) return this.getTabsMeta(); + return { tabMeta, tabsMeta }; + }; - if (children.length > 0) { - const tab = children[this.valueToIndex[value]]; - warning(tab, `Material-UI: the value provided \`${value}\` is invalid`); - tabMeta = tab ? tab.getBoundingClientRect() : null; + getTabsMeta = refreshTabMeta => { + const { props, state, tabs } = this; + const { theme, value } = props; + const { tabMeta, tabsMeta } = state; + const returnValue = { tabMeta, tabsMeta }; + if (tabs) { + if (!tabsMeta) { + const tabsRect = this.tabs.getBoundingClientRect(); + // create a new object with ClientRect class props + scrollLeft + returnValue.tabsMeta = { + clientWidth: tabs.clientWidth, + scrollLeft: tabs.scrollLeft, + scrollLeftNormalized: getNormalizedScrollLeft(tabs, theme.direction), + scrollWidth: tabs.scrollWidth, + left: tabsRect.left, + right: tabsRect.right, + }; + } + if (value !== false && (!tabMeta || refreshTabMeta)) { + const children = tabs.children[0].children; + if (children.length > 0) { + const tab = children[this.valueToIndex[value]]; + warning(tab, `Material-UI: the value provided \`${value}\` is invalid`); + returnValue.tabMeta = tab.getBoundingClientRect(); + } } } - return { tabsMeta, tabMeta }; + return returnValue; }; tabs = undefined; @@ -196,9 +206,8 @@ class Tabs extends React.Component { }; updateIndicatorState(props) { - const { theme, value } = props; - - const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction); + const { theme } = props; + const { tabsMeta, tabMeta } = this.getTabsMeta(false); let left = 0; if (tabMeta && tabsMeta) { @@ -226,8 +235,7 @@ class Tabs extends React.Component { } scrollSelectedIntoView = () => { - const { theme, value } = this.props; - const { tabsMeta, tabMeta } = this.getTabsMeta(value, theme.direction); + const { tabsMeta, tabMeta } = this.getTabsMeta(true); if (!tabMeta || !tabsMeta) { return; @@ -279,6 +287,7 @@ class Tabs extends React.Component { scrollable, ScrollButtonComponent, scrollButtons, + staticLabel, TabIndicatorProps = {}, textColor, theme, @@ -330,6 +339,7 @@ class Tabs extends React.Component { indicator: selected && !this.state.mounted && indicator, selected, onChange, + staticLabel, textColor, value: childValue, }); @@ -422,6 +432,12 @@ Tabs.propTypes = { * `off` will never present them */ scrollButtons: PropTypes.oneOf(['auto', 'on', 'off']), + /** + * Prevents resizing on the labels after the first query. + * This improves performance, but leads to broken UX on resize or label change. + * As a result, it works best with mobile devices, where widths are fixed. + */ + staticLabel: PropTypes.bool, /** * Properties applied to the `TabIndicator` element. */ From 508968b2d14f41ef8796f71621b2a793dc52bbab Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Mon, 4 Jun 2018 10:15:42 -0500 Subject: [PATCH 02/10] [Tabs] wip optimization for mobile --- packages/material-ui/src/Tabs/Tabs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index c87258e4336aef..897de613ff3ea7 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -131,6 +131,8 @@ class Tabs extends React.Component { return { tabMeta, tabsMeta }; }; + getTabMeta = () => {}; + getTabsMeta = refreshTabMeta => { const { props, state, tabs } = this; const { theme, value } = props; From d1795e15c469a982b7a24b24580ba61cd382dba2 Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Thu, 7 Jun 2018 14:42:02 -0500 Subject: [PATCH 03/10] [Tabs] Perf to minimize DOM thrashes on mobile --- packages/material-ui/src/Tabs/Tabs.js | 84 ++++++++++++++++----------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 897de613ff3ea7..ae5970b7617428 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -125,42 +125,58 @@ class Tabs extends React.Component { return conditionalElements; }; - getTabsMetaStaticLabel = refreshTabMeta => { - const { tabMeta, tabsMeta } = this.state; - if (refreshTabMeta) return this.getTabsMeta(); - return { tabMeta, tabsMeta }; + getMeta = refreshTabMeta => { + if (this.props.staticLabel) return this.getMetaStaticLabel(refreshTabMeta); + return { + tabMeta: this.getTabMeta(), + tabsMeta: this.getTabsMeta(), + }; }; - getTabMeta = () => {}; + getMetaStaticLabel = refreshTabMeta => { + const { tabMeta, tabsMeta } = this.state; + if (!refreshTabMeta) return { tabMeta, tabsMeta }; + return { + tabsMeta, + tabMeta: this.getTabMeta(), + }; + }; - getTabsMeta = refreshTabMeta => { - const { props, state, tabs } = this; - const { theme, value } = props; - const { tabMeta, tabsMeta } = state; - const returnValue = { tabMeta, tabsMeta }; - if (tabs) { - if (!tabsMeta) { - const tabsRect = this.tabs.getBoundingClientRect(); - // create a new object with ClientRect class props + scrollLeft - returnValue.tabsMeta = { - clientWidth: tabs.clientWidth, - scrollLeft: tabs.scrollLeft, - scrollLeftNormalized: getNormalizedScrollLeft(tabs, theme.direction), - scrollWidth: tabs.scrollWidth, - left: tabsRect.left, - right: tabsRect.right, + getTabMeta = () => { + const { props, tabs } = this; + const { value } = props; + if (tabs && value !== false) { + const children = tabs.children[0].children; + if (children.length > 0) { + const tab = children[this.valueToIndex[value]]; + warning(tab, `Material-UI: the value provided \`${value}\` is invalid`); + const rect = tab.getBoundingClientRect(); + return { + width: rect.width, + left: rect.left, + right: rect.right, }; } - if (value !== false && (!tabMeta || refreshTabMeta)) { - const children = tabs.children[0].children; - if (children.length > 0) { - const tab = children[this.valueToIndex[value]]; - warning(tab, `Material-UI: the value provided \`${value}\` is invalid`); - returnValue.tabMeta = tab.getBoundingClientRect(); - } - } } - return returnValue; + return null; + }; + + getTabsMeta = () => { + const { props, tabs } = this; + const { theme } = props; + if (tabs) { + const rect = this.tabs.getBoundingClientRect(); + // create a new object with ClientRect class props + scrollLeft + return { + clientWidth: tabs.clientWidth, + scrollLeft: tabs.scrollLeft, + scrollLeftNormalized: getNormalizedScrollLeft(tabs, theme.direction), + scrollWidth: tabs.scrollWidth, + left: rect.left, + right: rect.right, + }; + } + return null; }; tabs = undefined; @@ -207,9 +223,9 @@ class Tabs extends React.Component { } }; - updateIndicatorState(props) { - const { theme } = props; - const { tabsMeta, tabMeta } = this.getTabsMeta(false); + updateIndicatorState({ theme }) { + const { tabsMeta, tabMeta } = this.getMeta(false); + let left = 0; if (tabMeta && tabsMeta) { @@ -237,7 +253,7 @@ class Tabs extends React.Component { } scrollSelectedIntoView = () => { - const { tabsMeta, tabMeta } = this.getTabsMeta(true); + const { tabsMeta, tabMeta } = this.getMeta(true); if (!tabMeta || !tabsMeta) { return; From 6011c69d29ad0697580164846f3f2c16d58beb5a Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Thu, 7 Jun 2018 15:01:06 -0500 Subject: [PATCH 04/10] [Tabs] Setting state for cached tabs/tab meta --- packages/material-ui/src/Tabs/Tabs.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index ae5970b7617428..a23fbda78ddb41 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -134,12 +134,19 @@ class Tabs extends React.Component { }; getMetaStaticLabel = refreshTabMeta => { - const { tabMeta, tabsMeta } = this.state; - if (!refreshTabMeta) return { tabMeta, tabsMeta }; - return { - tabsMeta, - tabMeta: this.getTabMeta(), + /* + Get meta static label only thrashes the DOM at two times: + 1. On mount, getting all tabs dimensions + 2. On mount and value change, getting the active tab dimensions + */ + const state = { + tabsMeta: this.state.tabsMeta || this.getTabsMeta(), + tabMeta: !refreshTabMeta && this.state.tabMeta ? this.state.tabMeta : this.getTabMeta(), }; + if (state.tabsMeta !== this.state.tabsMeta || state.tabMeta !== this.state.tabMeta) { + this.setState(state); + } + return state; }; getTabMeta = () => { From 95a0655dc4f6cde91f77937aefaf4c74e39c7f3a Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Thu, 7 Jun 2018 15:31:43 -0500 Subject: [PATCH 05/10] [Tab] Making staticLabel optional --- packages/material-ui/src/Tab/Tab.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Tab/Tab.d.ts b/packages/material-ui/src/Tab/Tab.d.ts index 7f99771e8c44aa..e1abfbef825ebe 100644 --- a/packages/material-ui/src/Tab/Tab.d.ts +++ b/packages/material-ui/src/Tab/Tab.d.ts @@ -11,7 +11,7 @@ export interface TabProps extends StandardProps, value: any) => void; onClick?: React.EventHandler; selected?: boolean; - staticLabel: boolean; + staticLabel?: boolean; style?: React.CSSProperties; textColor?: string | 'secondary' | 'primary' | 'inherit'; } From 6ce48c7e5026962b94735f4dc07921823cc7d79d Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Thu, 7 Jun 2018 15:40:22 -0500 Subject: [PATCH 06/10] [Tabs] fix: undefined if no tabsMeta --- packages/material-ui/src/Tabs/Tabs.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index a23fbda78ddb41..4ccf5c8eb6c470 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -152,7 +152,7 @@ class Tabs extends React.Component { getTabMeta = () => { const { props, tabs } = this; const { value } = props; - if (tabs && value !== false) { + if (tabs) { const children = tabs.children[0].children; if (children.length > 0) { const tab = children[this.valueToIndex[value]]; @@ -165,7 +165,7 @@ class Tabs extends React.Component { }; } } - return null; + return undefined; }; getTabsMeta = () => { @@ -183,7 +183,7 @@ class Tabs extends React.Component { right: rect.right, }; } - return null; + return undefined; }; tabs = undefined; From 1c18e063b8b2572d03eece4059a8cacd1e0ad430 Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Thu, 7 Jun 2018 15:56:34 -0500 Subject: [PATCH 07/10] [Tab] Avoid passing staticLabel down to base component --- packages/material-ui/src/Tab/Tab.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js index 18042c698399b7..bec7fcd72dbf9f 100644 --- a/packages/material-ui/src/Tab/Tab.js +++ b/packages/material-ui/src/Tab/Tab.js @@ -142,6 +142,7 @@ class Tab extends React.Component { icon, indicator, label: labelProp, + staticLabel, onChange, selected, textColor, From e0e850b2ad52d922430179fd76f6f68be03db733 Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Fri, 8 Jun 2018 11:25:13 -0500 Subject: [PATCH 08/10] [Tabs] Scroll on value changes --- docs/src/pages/demos/tabs/TabsStaticLabel.js | 59 ++++++++++++++++++++ docs/src/pages/demos/tabs/tabs.md | 6 ++ packages/material-ui/src/Tabs/Tabs.js | 26 ++++----- pages/demos/tabs.js | 7 +++ 4 files changed, 85 insertions(+), 13 deletions(-) create mode 100644 docs/src/pages/demos/tabs/TabsStaticLabel.js diff --git a/docs/src/pages/demos/tabs/TabsStaticLabel.js b/docs/src/pages/demos/tabs/TabsStaticLabel.js new file mode 100644 index 00000000000000..00395a5c83b508 --- /dev/null +++ b/docs/src/pages/demos/tabs/TabsStaticLabel.js @@ -0,0 +1,59 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Tabs from '@material-ui/core/Tabs'; +import Tab from '@material-ui/core/Tab'; +import Typography from '@material-ui/core/Typography'; + +function TabContainer(props) { + return ( + + {props.children} + + ); +} + +TabContainer.propTypes = { + children: PropTypes.node.isRequired, +}; + +const styles = theme => ({ + root: { + flexGrow: 1, + backgroundColor: theme.palette.background.paper, + }, +}); + +class StaticLabelTabs extends React.Component { + state = { + value: 0, + }; + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const { classes } = this.props; + const { value } = this.state; + + return ( +
+ + + + + + + +
+ ); + } +} + +StaticLabelTabs.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(StaticLabelTabs); diff --git a/docs/src/pages/demos/tabs/tabs.md b/docs/src/pages/demos/tabs/tabs.md index 156738cfe1f70b..66bd87f4d5358e 100644 --- a/docs/src/pages/demos/tabs/tabs.md +++ b/docs/src/pages/demos/tabs/tabs.md @@ -74,3 +74,9 @@ If you have read the [overrides documentation page](/customization/overrides) but aren't confident jumping in, here's an example of how you can change the main color of the Tabs. The following demo matches the [Ant Design UI](https://ant.design/components/tabs/). {{"demo": "pages/demos/tabs/CustomizedTabs.js"}} + +### Static Labels + +Static labels will ignore resize events and label text dimension changes, to provide a slight performance boost. If you're targetting a mobile device and your labels aren't changing, this may decrease rerender cost. + +{{"demo": "pages/demos/tabs/TabsStaticLabel.js"}} \ No newline at end of file diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 4ccf5c8eb6c470..7795c0e0c1c495 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -93,8 +93,8 @@ class Tabs extends React.Component { const conditionalElements = {}; conditionalElements.scrollbarSizeListener = scrollable ? ( ) : null; @@ -139,12 +139,14 @@ class Tabs extends React.Component { 1. On mount, getting all tabs dimensions 2. On mount and value change, getting the active tab dimensions */ - const state = { - tabsMeta: this.state.tabsMeta || this.getTabsMeta(), - tabMeta: !refreshTabMeta && this.state.tabMeta ? this.state.tabMeta : this.getTabMeta(), - }; - if (state.tabsMeta !== this.state.tabsMeta || state.tabMeta !== this.state.tabMeta) { - this.setState(state); + const state = this.state; + const { value } = this.props; + const tabsMeta = state.tabsMeta || this.getTabsMeta(); + const takeTabMeta = refreshTabMeta || !state.tabMeta || state.tabMeta.value !== value; + const tabMeta = takeTabMeta ? this.getTabMeta() : state.tabMeta; + const tabMetaUpdated = tabMeta && (tabMeta !== state.tabMeta || value !== tabMeta.value); + if (tabsMeta !== state.tabsMeta || tabMetaUpdated) { + this.setState({ tabMeta, tabsMeta }); } return state; }; @@ -152,16 +154,17 @@ class Tabs extends React.Component { getTabMeta = () => { const { props, tabs } = this; const { value } = props; - if (tabs) { + if (tabs && value !== false) { const children = tabs.children[0].children; if (children.length > 0) { const tab = children[this.valueToIndex[value]]; warning(tab, `Material-UI: the value provided \`${value}\` is invalid`); const rect = tab.getBoundingClientRect(); return { - width: rect.width, left: rect.left, right: rect.right, + value, + width: rect.width, }; } } @@ -262,10 +265,7 @@ class Tabs extends React.Component { scrollSelectedIntoView = () => { const { tabsMeta, tabMeta } = this.getMeta(true); - if (!tabMeta || !tabsMeta) { - return; - } - + if (!tabMeta || !tabsMeta) return; if (tabMeta.left < tabsMeta.left) { // left side of button is out of view const nextScrollLeft = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left); diff --git a/pages/demos/tabs.js b/pages/demos/tabs.js index 94a1f3c3b896cc..0ecb52742a2dae 100644 --- a/pages/demos/tabs.js +++ b/pages/demos/tabs.js @@ -13,6 +13,13 @@ function Page() { raw: preval` module.exports = require('fs') .readFileSync(require.resolve('docs/src/pages/demos/tabs/SimpleTabs'), 'utf8') +`, + }, + 'pages/demos/tabs/TabsStaticLabel.js': { + js: require('docs/src/pages/demos/tabs/TabsStaticLabel').default, + raw: preval` +module.exports = require('fs') + .readFileSync(require.resolve('docs/src/pages/demos/tabs/TabsStaticLabel'), 'utf8') `, }, 'pages/demos/tabs/TabsWrappedLabel.js': { From a3e07b116467987ea6b8cda90d1d889d150b2d35 Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Fri, 8 Jun 2018 13:11:41 -0500 Subject: [PATCH 09/10] [Tabs] No exception on invalid values --- packages/material-ui/src/Tabs/Tabs.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 7795c0e0c1c495..e074a5a6d162a2 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -159,13 +159,15 @@ class Tabs extends React.Component { if (children.length > 0) { const tab = children[this.valueToIndex[value]]; warning(tab, `Material-UI: the value provided \`${value}\` is invalid`); - const rect = tab.getBoundingClientRect(); - return { - left: rect.left, - right: rect.right, - value, - width: rect.width, - }; + if (tab) { + const rect = tab.getBoundingClientRect(); + return { + left: rect.left, + right: rect.right, + value, + width: rect.width, + }; + } } } return undefined; From 344ef3dcdf2b66972f0a3ce4c88b4489129affb6 Mon Sep 17 00:00:00 2001 From: Todd tarsi Date: Fri, 8 Jun 2018 15:51:43 -0500 Subject: [PATCH 10/10] Tab - add value to test --- packages/material-ui/src/Tabs/Tabs.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js index 71638d78872e6b..4f280905abbb8b 100644 --- a/packages/material-ui/src/Tabs/Tabs.test.js +++ b/packages/material-ui/src/Tabs/Tabs.test.js @@ -579,7 +579,7 @@ describe('', () => { it('should scroll left tab into view', () => { metaStub.returns({ tabsMeta: { left: 0, right: 100, scrollLeft: 10 }, - tabMeta: { left: -10, right: 10 }, + tabMeta: { left: -10, right: 10, value: 0 }, }); instance.scrollSelectedIntoView(); @@ -589,7 +589,7 @@ describe('', () => { it('should scroll right tab into view', () => { metaStub.returns({ tabsMeta: { left: 0, right: 100, scrollLeft: 0 }, - tabMeta: { left: 90, right: 110 }, + tabMeta: { left: 90, right: 110, value: 1 }, }); instance.scrollSelectedIntoView();