diff --git a/.size-limit.js b/.size-limit.js index 47131acdd4dc0c..5d8db07dd5af59 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -27,7 +27,7 @@ module.exports = [ name: 'The size of all the modules of material-ui.', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '95.1 KB', + limit: '95.2 KB', }, { name: 'The main bundle of the docs', diff --git a/packages/material-ui/src/RootRef/RootRef.js b/packages/material-ui/src/RootRef/RootRef.js index 1d9afc474b0872..41ad39eb436b78 100644 --- a/packages/material-ui/src/RootRef/RootRef.js +++ b/packages/material-ui/src/RootRef/RootRef.js @@ -3,6 +3,14 @@ import ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import exactProp from '../utils/exactProp'; +function setRef(ref, value) { + if (typeof ref === 'function') { + ref(value); + } else if (ref) { + ref.current = value; + } +} + /** * Helper component to allow attaching a ref to a * wrapped element to access the underlying DOM element. @@ -35,22 +43,18 @@ import exactProp from '../utils/exactProp'; */ class RootRef extends React.Component { componentDidMount() { - const rootRef = this.props.rootRef; - const node = ReactDOM.findDOMNode(this); - if (typeof rootRef === 'function') { - rootRef(node); - } else if (rootRef) { - rootRef.current = node; + setRef(this.props.rootRef, ReactDOM.findDOMNode(this)); + } + + componentDidUpdate(prevProps) { + if (prevProps.rootRef !== this.props.rootRef) { + setRef(prevProps.rootRef, null); + setRef(this.props.rootRef, ReactDOM.findDOMNode(this)); } } componentWillUnmount() { - const rootRef = this.props.rootRef; - if (typeof rootRef === 'function') { - rootRef(null); - } else if (rootRef) { - rootRef.current = null; - } + setRef(this.props.rootRef, null); } render() { diff --git a/packages/material-ui/src/RootRef/RootRef.test.js b/packages/material-ui/src/RootRef/RootRef.test.js index 6c0619b35c477f..dd5e12b693db4c 100644 --- a/packages/material-ui/src/RootRef/RootRef.test.js +++ b/packages/material-ui/src/RootRef/RootRef.test.js @@ -3,6 +3,8 @@ import { assert } from 'chai'; import { createMount } from '../test-utils'; import RootRef from './RootRef'; +const Fn = () =>
; + describe('', () => { let mount; @@ -15,7 +17,6 @@ describe('', () => { }); it('call rootRef function on mount and unmount', () => { - const Fn = () =>
; const results = []; const wrapper = mount( results.push(ref)}> @@ -30,7 +31,6 @@ describe('', () => { }); it('set rootRef current field on mount and unmount', () => { - const Fn = () =>
; const ref = React.createRef(); const wrapper = mount( @@ -41,4 +41,24 @@ describe('', () => { wrapper.unmount(); assert.strictEqual(ref.current, null); }); + + it('should support providing a new rootRef', () => { + const results = []; + const wrapper = mount( + results.push(ref)}> + + , + ); + assert.strictEqual(results.length, 1); + assert.strictEqual(results[0] instanceof window.HTMLDivElement, true); + wrapper.setProps({ + rootRef: ref => results.push(ref), + }); + assert.strictEqual(results.length, 3); + assert.strictEqual(results[1], null); + assert.strictEqual(results[2] instanceof window.HTMLDivElement, true); + wrapper.unmount(); + assert.strictEqual(results.length, 4); + assert.strictEqual(results[3], null); + }); }); diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 1bf6d826317990..dc3e48a0a8b76e 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -131,6 +131,10 @@ class Tooltip extends React.Component { clearTimeout(this.closeTimer); } + onRootRef = ref => { + this.childrenRef = ref; + }; + handleEnter = event => { const { children, enterDelay } = this.props; const childrenProps = children.props; @@ -319,13 +323,7 @@ class Tooltip extends React.Component { return ( - { - this.childrenRef = ref; - }} - > - {React.cloneElement(children, childrenProps)} - + {React.cloneElement(children, childrenProps)}