From 8e45a5e89b943e178b932e85be6b9e3a21d8097c Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 22 Jul 2018 14:25:51 +0200
Subject: [PATCH] [core] Rename node to ref

---
 docs/src/modules/components/AppSearch.js      | 10 ++--
 .../pages/demos/dialogs/ConfirmationDialog.js |  8 +--
 .../pages/utils/popper/ScrollPlayground.js    | 10 ++--
 docs/src/pages/utils/portal/SimplePortal.js   |  4 +-
 packages/material-ui-lab/src/Slider/Slider.js | 14 +++---
 .../src/SpeedDial/SpeedDial.js                | 14 +++---
 packages/material-ui/src/Chip/Chip.js         |  4 +-
 packages/material-ui/src/Collapse/Collapse.js | 10 ++--
 .../material-ui/src/Collapse/Collapse.test.js | 10 ++--
 packages/material-ui/src/Input/Input.js       | 22 ++++----
 packages/material-ui/src/Input/Input.test.js  | 14 +++---
 packages/material-ui/src/Input/Textarea.js    | 34 ++++++-------
 .../material-ui/src/Input/Textarea.test.js    | 50 +++++++++----------
 packages/material-ui/src/Menu/Menu.js         | 20 ++++----
 packages/material-ui/src/Menu/Menu.test.js    | 16 +++---
 packages/material-ui/src/MenuList/MenuList.js | 32 ++++++------
 packages/material-ui/src/Modal/Modal.js       | 12 ++---
 packages/material-ui/src/Popover/Popover.js   | 10 ++--
 .../material-ui/src/Portal/Portal.test.js     | 12 ++---
 .../material-ui/src/RootRef/RootRef.test.js   |  2 +-
 .../material-ui/src/Select/SelectInput.js     | 26 +++++-----
 .../src/Select/SelectInput.test.js            |  4 +-
 packages/material-ui/src/Slide/Slide.js       | 16 +++---
 packages/material-ui/src/Slide/Slide.test.js  |  8 ++-
 packages/material-ui/src/Tab/Tab.js           |  8 +--
 packages/material-ui/src/Tab/Tab.test.js      |  4 +-
 .../material-ui/src/Tabs/ScrollbarSize.js     | 18 ++++---
 .../src/Tabs/ScrollbarSize.test.js            |  2 +-
 packages/material-ui/src/Tabs/Tabs.js         | 44 ++++++++--------
 packages/material-ui/src/Tabs/Tabs.test.js    | 12 ++---
 packages/material-ui/src/Tooltip/Tooltip.js   |  4 +-
 .../material-ui/test/integration/Menu.test.js |  4 +-
 32 files changed, 227 insertions(+), 231 deletions(-)

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index beceae5af8ad28..778adc7f78caea 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -153,16 +153,16 @@ const styles = theme => ({
 });
 
 class AppSearch extends React.Component {
-  input = null;
+  inputRef = null;
 
   handleKeyDown = event => {
     if (
       ['/', 's'].indexOf(keycode(event)) !== -1 &&
       document.activeElement.nodeName.toLowerCase() === 'body' &&
-      document.activeElement !== this.input
+      document.activeElement !== this.inputRef
     ) {
       event.preventDefault();
-      this.input.focus();
+      this.inputRef.focus();
     }
   };
 
@@ -181,8 +181,8 @@ class AppSearch extends React.Component {
         </div>
         <input
           id="docsearch-input"
-          ref={node => {
-            this.input = node;
+          ref={ref => {
+            this.inputRef = ref;
           }}
           className={classes.input}
         />
diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
index 444e9fbdf5174b..242f5583e7f1d2 100644
--- a/docs/src/pages/demos/dialogs/ConfirmationDialog.js
+++ b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
@@ -33,7 +33,7 @@ const options = [
 ];
 
 class ConfirmationDialogRaw extends React.Component {
-  radioGroup = null;
+  radioGroupRef = null;
 
   constructor(props) {
     super(props);
@@ -51,7 +51,7 @@ class ConfirmationDialogRaw extends React.Component {
   }
 
   handleEntering = () => {
-    this.radioGroup.focus();
+    this.radioGroupRef.focus();
   };
 
   handleCancel = () => {
@@ -81,8 +81,8 @@ class ConfirmationDialogRaw extends React.Component {
         <DialogTitle id="confirmation-dialog-title">Phone Ringtone</DialogTitle>
         <DialogContent>
           <RadioGroup
-            ref={node => {
-              this.radioGroup = node;
+            ref={ref => {
+              this.radioGroupRef = ref;
             }}
             aria-label="Ringtone"
             name="ringtone"
diff --git a/docs/src/pages/utils/popper/ScrollPlayground.js b/docs/src/pages/utils/popper/ScrollPlayground.js
index 3b03e1c7f94988..a134cffca71d0b 100644
--- a/docs/src/pages/utils/popper/ScrollPlayground.js
+++ b/docs/src/pages/utils/popper/ScrollPlayground.js
@@ -140,14 +140,14 @@ class AnchorPlayground extends React.Component {
     });
   };
 
-  centerScroll = node => {
-    if (!node) {
+  centerScroll = ref => {
+    if (!ref) {
       return;
     }
 
-    const container = node.parentElement;
-    container.scrollTop = node.clientHeight / 4;
-    container.scrollLeft = node.clientWidth / 4;
+    const container = ref.parentElement;
+    container.scrollTop = ref.clientHeight / 4;
+    container.scrollLeft = ref.clientWidth / 4;
   };
 
   render() {
diff --git a/docs/src/pages/utils/portal/SimplePortal.js b/docs/src/pages/utils/portal/SimplePortal.js
index c08f64d0929b5d..40c0056df15595 100644
--- a/docs/src/pages/utils/portal/SimplePortal.js
+++ b/docs/src/pages/utils/portal/SimplePortal.js
@@ -41,8 +41,8 @@ class SimplePortal extends React.Component {
         </div>
         <div
           className={classes.alert}
-          ref={node => {
-            this.container = node;
+          ref={ref => {
+            this.container = ref;
           }}
         />
       </div>
diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index af0861b7f537bf..5edd623ef48c41 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -222,13 +222,13 @@ class Slider extends React.Component {
   state = { currentState: 'initial' };
 
   componentDidMount() {
-    if (this.container) {
-      this.container.addEventListener('touchstart', preventPageScrolling, { passive: false });
+    if (this.containerRef) {
+      this.containerRef.addEventListener('touchstart', preventPageScrolling, { passive: false });
     }
   }
 
   componentWillUnmount() {
-    this.container.removeEventListener('touchstart', preventPageScrolling, { passive: false });
+    this.containerRef.removeEventListener('touchstart', preventPageScrolling, { passive: false });
   }
 
   static getDerivedStateFromProps(nextProps, prevState) {
@@ -292,7 +292,7 @@ class Slider extends React.Component {
 
   handleClick = event => {
     const { min, max, vertical, reverse } = this.props;
-    const percent = calculatePercent(this.container, event, vertical, reverse);
+    const percent = calculatePercent(this.containerRef, event, vertical, reverse);
     const value = percentToValue(percent, min, max);
 
     this.emitChange(event, value, () => {
@@ -341,7 +341,7 @@ class Slider extends React.Component {
 
   handleMouseMove = event => {
     const { min, max, vertical, reverse } = this.props;
-    const percent = calculatePercent(this.container, event, vertical, reverse);
+    const percent = calculatePercent(this.containerRef, event, vertical, reverse);
     const value = percentToValue(percent, min, max);
 
     this.emitChange(event, value);
@@ -471,8 +471,8 @@ class Slider extends React.Component {
         onMouseDown={this.handleMouseDown}
         onTouchStartCapture={this.handleTouchStart}
         onTouchMove={this.handleMouseMove}
-        ref={node => {
-          this.container = findDOMNode(node);
+        ref={ref => {
+          this.containerRef = findDOMNode(ref);
         }}
         {...other}
       >
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
index b9e89f39a58cb5..b1697a34f07faf 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
+++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -36,8 +36,8 @@ class SpeedDial extends React.Component {
   };
 
   handleKeyDown = event => {
-    const actions = ReactDOM.findDOMNode(this.actions);
-    const fab = ReactDOM.findDOMNode(this.fab);
+    const actions = ReactDOM.findDOMNode(this.actionsRef);
+    const fab = ReactDOM.findDOMNode(this.fabRef);
     const key = keycode(event);
     const currentFocus = document.activeElement;
     const { open, onClose, onKeyDown } = this.props;
@@ -68,7 +68,7 @@ class SpeedDial extends React.Component {
       if (currentFocus.parentElement.previousElementSibling) {
         currentFocus.parentElement.previousElementSibling.firstChild.focus();
       } else {
-        ReactDOM.findDOMNode(this.fab).focus();
+        fab.focus();
       }
       // Select the next action
     } else if (key === nextKey) {
@@ -168,8 +168,8 @@ class SpeedDial extends React.Component {
             aria-haspopup="true"
             aria-expanded={open ? 'true' : 'false'}
             aria-controls={`${id}-actions`}
-            ref={node => {
-              this.fab = node;
+            ref={ref => {
+              this.fabRef = ref;
             }}
             {...ButtonProps}
           >
@@ -179,8 +179,8 @@ class SpeedDial extends React.Component {
         <div
           id={`${id}-actions`}
           className={classNames(classes.actions, { [classes.actionsClosed]: !open })}
-          ref={node => {
-            this.actions = node;
+          ref={ref => {
+            this.actionsRef = ref;
           }}
         >
           {children}
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index bcfd8189df53d8..652f09be5d2b0c 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -192,8 +192,8 @@ class Chip extends React.Component {
         tabIndex={tabIndex}
         onClick={onClick}
         onKeyDown={this.handleKeyDown}
-        ref={node => {
-          this.chipRef = node;
+        ref={ref => {
+          this.chipRef = ref;
         }}
         {...other}
       >
diff --git a/packages/material-ui/src/Collapse/Collapse.js b/packages/material-ui/src/Collapse/Collapse.js
index f8c182e467a46e..74ce166b0aee4b 100644
--- a/packages/material-ui/src/Collapse/Collapse.js
+++ b/packages/material-ui/src/Collapse/Collapse.js
@@ -56,7 +56,7 @@ class Collapse extends React.Component {
 
   handleEntering = node => {
     const { timeout, theme } = this.props;
-    const wrapperHeight = this.wrapper ? this.wrapper.clientHeight : 0;
+    const wrapperHeight = this.wrapperRef ? this.wrapperRef.clientHeight : 0;
 
     const { duration: transitionDuration } = getTransitionProps(this.props, {
       mode: 'enter',
@@ -87,7 +87,7 @@ class Collapse extends React.Component {
   };
 
   handleExit = node => {
-    const wrapperHeight = this.wrapper ? this.wrapper.clientHeight : 0;
+    const wrapperHeight = this.wrapperRef ? this.wrapperRef.clientHeight : 0;
     node.style.height = `${wrapperHeight}px`;
 
     if (this.props.onExit) {
@@ -97,7 +97,7 @@ class Collapse extends React.Component {
 
   handleExiting = node => {
     const { timeout, theme } = this.props;
-    const wrapperHeight = this.wrapper ? this.wrapper.clientHeight : 0;
+    const wrapperHeight = this.wrapperRef ? this.wrapperRef.clientHeight : 0;
 
     const { duration: transitionDuration } = getTransitionProps(this.props, {
       mode: 'exit',
@@ -172,8 +172,8 @@ class Collapse extends React.Component {
             >
               <div
                 className={classes.wrapper}
-                ref={node => {
-                  this.wrapper = node;
+                ref={ref => {
+                  this.wrapperRef = ref;
                 }}
               >
                 <div className={classes.wrapperInner}>{children}</div>
diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/packages/material-ui/src/Collapse/Collapse.test.js
index 1a07bf8ca22b51..3469ce8ccf1967 100644
--- a/packages/material-ui/src/Collapse/Collapse.test.js
+++ b/packages/material-ui/src/Collapse/Collapse.test.js
@@ -164,7 +164,7 @@ describe('<Collapse />', () => {
         });
 
         it('no wrapper', () => {
-          instance.wrapper = false;
+          instance.wrapperRef = false;
           instance.handleEntering(element);
           assert.strictEqual(
             element.style.transitionDuration,
@@ -174,7 +174,7 @@ describe('<Collapse />', () => {
 
         it('has wrapper', () => {
           const clientHeightMock = 10;
-          instance.wrapper = { clientHeight: clientHeightMock };
+          instance.wrapperRef = { clientHeight: clientHeightMock };
           instance.handleEntering(element);
           assert.strictEqual(
             element.style.transitionDuration,
@@ -232,7 +232,7 @@ describe('<Collapse />', () => {
     describe('handleExit()', () => {
       it('should set height to the wrapper height', () => {
         const element = { style: { height: 'auto' } };
-        instance.wrapper = { clientHeight: 666 };
+        instance.wrapperRef = { clientHeight: 666 };
         instance.handleExit(element);
         assert.strictEqual(element.style.height, '666px', 'should have 666px height');
       });
@@ -278,7 +278,7 @@ describe('<Collapse />', () => {
         });
 
         it('no wrapper', () => {
-          instance.wrapper = false;
+          instance.wrapperRef = false;
           instance.handleExiting(element);
           assert.strictEqual(
             element.style.transitionDuration,
@@ -288,7 +288,7 @@ describe('<Collapse />', () => {
 
         it('has wrapper', () => {
           const clientHeightMock = 10;
-          instance.wrapper = { clientHeight: clientHeightMock };
+          instance.wrapperRef = { clientHeight: clientHeightMock };
           instance.handleExiting(element);
           assert.strictEqual(
             element.style.transitionDuration,
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index eb5c7dbb9c9be5..facb5c4d849089 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -292,7 +292,7 @@ class Input extends React.Component {
 
   componentDidMount() {
     if (!this.isControlled) {
-      this.checkDirty(this.input);
+      this.checkDirty(this.inputRef);
     }
   }
 
@@ -335,7 +335,7 @@ class Input extends React.Component {
 
   handleChange = event => {
     if (!this.isControlled) {
-      this.checkDirty(this.input);
+      this.checkDirty(this.inputRef);
     }
 
     // Perform in the willUpdate
@@ -344,22 +344,22 @@ class Input extends React.Component {
     }
   };
 
-  handleRefInput = node => {
-    this.input = node;
+  handleRefInput = ref => {
+    this.inputRef = ref;
 
-    let ref;
+    let refProp;
 
     if (this.props.inputRef) {
-      ref = this.props.inputRef;
+      refProp = this.props.inputRef;
     } else if (this.props.inputProps && this.props.inputProps.ref) {
-      ref = this.props.inputProps.ref;
+      refProp = this.props.inputProps.ref;
     }
 
-    if (ref) {
-      if (typeof ref === 'function') {
-        ref(node);
+    if (refProp) {
+      if (typeof refProp === 'function') {
+        refProp(ref);
       } else {
-        ref.current = node;
+        refProp.current = ref;
       }
     }
   };
diff --git a/packages/material-ui/src/Input/Input.test.js b/packages/material-ui/src/Input/Input.test.js
index 485faf4bb91c1f..30d9a12ffef800 100644
--- a/packages/material-ui/src/Input/Input.test.js
+++ b/packages/material-ui/src/Input/Input.test.js
@@ -231,7 +231,7 @@ describe('<Input />', () => {
 
     it('should fire the onFilled callback when dirtied', () => {
       assert.strictEqual(handleFilled.callCount, 1, 'should not have called the onFilled cb yet');
-      wrapper.instance().input.value = 'hello';
+      wrapper.instance().inputRef.value = 'hello';
       wrapper.find('input').simulate('change');
       assert.strictEqual(handleFilled.callCount, 2, 'should have called the onFilled cb');
     });
@@ -239,7 +239,7 @@ describe('<Input />', () => {
     it('should fire the onEmpty callback when cleaned', () => {
       // Because of shallow() this hasn't fired since there is no mounting
       assert.strictEqual(handleEmpty.callCount, 0, 'should not have called the onEmpty cb yet');
-      wrapper.instance().input.value = '';
+      wrapper.instance().inputRef.value = '';
       wrapper.find('input').simulate('change');
       assert.strictEqual(handleEmpty.callCount, 1, 'should have called the onEmpty cb');
     });
@@ -265,7 +265,7 @@ describe('<Input />', () => {
 
     describe('callbacks', () => {
       beforeEach(() => {
-        wrapper.instance().input = { value: '' };
+        wrapper.instance().inputRef = { value: '' };
         setFormControlContext({
           onFilled: spy(),
           onEmpty: spy(),
@@ -280,7 +280,7 @@ describe('<Input />', () => {
           onFilled: handleFilled,
         });
 
-        wrapper.instance().input.value = 'hello';
+        wrapper.instance().inputRef.value = 'hello';
         wrapper.find('input').simulate('change');
         assert.strictEqual(handleFilled.callCount, 1, 'should have called the onFilled props cb');
         assert.strictEqual(
@@ -296,7 +296,7 @@ describe('<Input />', () => {
           onEmpty: handleEmpty,
         });
 
-        wrapper.instance().input.value = '';
+        wrapper.instance().inputRef.value = '';
         wrapper.find('input').simulate('change');
         assert.strictEqual(handleEmpty.callCount, 1, 'should have called the onEmpty props cb');
         assert.strictEqual(
@@ -401,9 +401,9 @@ describe('<Input />', () => {
 
     it('should call checkDirty with input value', () => {
       instance.isControlled = false;
-      instance.input = 'woofinput';
+      instance.inputRef = 'woofinput';
       instance.componentDidMount();
-      assert.strictEqual(instance.checkDirty.calledWith(instance.input), true);
+      assert.strictEqual(instance.checkDirty.calledWith(instance.inputRef), true);
     });
 
     it('should call or not call checkDirty consistently', () => {
diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js
index de6a8a8ad82fc5..60b26ebf59096a 100644
--- a/packages/material-ui/src/Input/Textarea.js
+++ b/packages/material-ui/src/Input/Textarea.js
@@ -43,11 +43,11 @@ export const styles = {
  * @ignore - internal component.
  */
 class Textarea extends React.Component {
-  shadow = null;
+  shadowRef = null;
 
-  singlelineShadow = null;
+  singlelineShadowRef = null;
 
-  input = null;
+  inputRef = null;
 
   value = null;
 
@@ -82,33 +82,33 @@ class Textarea extends React.Component {
     this.handleResize.clear();
   }
 
-  handleRefInput = node => {
-    this.input = node;
+  handleRefInput = ref => {
+    this.inputRef = ref;
 
     const { textareaRef } = this.props;
     if (textareaRef) {
       if (typeof textareaRef === 'function') {
-        textareaRef(node);
+        textareaRef(ref);
       } else {
-        textareaRef.current = node;
+        textareaRef.current = ref;
       }
     }
   };
 
-  handleRefSinglelineShadow = node => {
-    this.singlelineShadow = node;
+  handleRefSinglelineShadow = ref => {
+    this.singlelineShadowRef = ref;
   };
 
-  handleRefShadow = node => {
-    this.shadow = node;
+  handleRefShadow = ref => {
+    this.shadowRef = ref;
   };
 
   handleChange = event => {
     this.value = event.target.value;
 
-    if (typeof this.props.value === 'undefined' && this.shadow) {
+    if (typeof this.props.value === 'undefined' && this.shadowRef) {
       // The component is not controlled, we need to update the shallow value.
-      this.shadow.value = this.value;
+      this.shadowRef.value = this.value;
       this.syncHeightWithShadow();
     }
 
@@ -119,17 +119,17 @@ class Textarea extends React.Component {
 
   syncHeightWithShadow() {
     const props = this.props;
-    if (!this.shadow || !this.singlelineShadow) {
+    if (!this.shadowRef || !this.singlelineShadowRef) {
       return;
     }
 
     // The component is controlled, we need to update the shallow value.
     if (typeof props.value !== 'undefined') {
-      this.shadow.value = props.value == null ? '' : String(props.value);
+      this.shadowRef.value = props.value == null ? '' : String(props.value);
     }
 
-    const lineHeight = this.singlelineShadow.scrollHeight;
-    let newHeight = this.shadow.scrollHeight;
+    const lineHeight = this.singlelineShadowRef.scrollHeight;
+    let newHeight = this.shadowRef.scrollHeight;
 
     // Guarding for jsdom, where scrollHeight isn't present.
     // See https://github.com/tmpvar/jsdom/issues/1013
diff --git a/packages/material-ui/src/Input/Textarea.test.js b/packages/material-ui/src/Input/Textarea.test.js
index 6e6f6a4023b630..03262f5a67c5da 100644
--- a/packages/material-ui/src/Input/Textarea.test.js
+++ b/packages/material-ui/src/Input/Textarea.test.js
@@ -7,17 +7,17 @@ import Textarea from './Textarea';
 function assignRefs(wrapper) {
   // refs don't work with shallow renders in enzyme so here we directly define
   // 'this.input', 'this.shadow', etc. for this Textarea via wrapper.instance()
-  const input = wrapper.find('textarea').last();
-  wrapper.instance().input = input;
-  const textareaShadow = wrapper.find('textarea').at(2);
-  wrapper.instance().shadow = textareaShadow;
-  const singlelineShadow = wrapper.find('textarea').first();
-  wrapper.instance().singlelineShadow = singlelineShadow;
+  const inputRef = wrapper.find('textarea').last();
+  wrapper.instance().inputRef = inputRef;
+  const textareaShadowRef = wrapper.find('textarea').at(2);
+  wrapper.instance().shadowRef = textareaShadowRef;
+  const singlelineShadowRef = wrapper.find('textarea').first();
+  wrapper.instance().singlelineShadowRef = singlelineShadowRef;
 
   return {
-    singlelineShadow,
-    textareaShadow,
-    input,
+    inputRef,
+    singlelineShadowRef,
+    textareaShadowRef,
   };
 }
 
@@ -47,15 +47,15 @@ describe('<Textarea />', () => {
 
     // jsdom doesn't support scroll height so we have to simulate it changing
     // which makes this not so great of a test :(
-    refs.textareaShadow.scrollHeight = 43;
-    refs.singlelineShadow.scrollHeight = 43;
+    refs.textareaShadowRef.scrollHeight = 43;
+    refs.singlelineShadowRef.scrollHeight = 43;
     // this is needed to trigger the resize
-    refs.input.simulate('change', { target: { value: 'x' } });
+    refs.inputRef.simulate('change', { target: { value: 'x' } });
     assert.strictEqual(wrapper.state().height, 43);
 
-    refs.textareaShadow.scrollHeight = 19;
-    refs.singlelineShadow.scrollHeight = 19;
-    refs.input.simulate('change', { target: { value: '' } });
+    refs.textareaShadowRef.scrollHeight = 19;
+    refs.singlelineShadowRef.scrollHeight = 19;
+    refs.inputRef.simulate('change', { target: { value: '' } });
     assert.strictEqual(wrapper.state().height, 19);
   });
 
@@ -73,11 +73,11 @@ describe('<Textarea />', () => {
 
     it('should update the height when the value change', () => {
       const instance = wrapper.instance();
-      instance.singlelineShadow = { scrollHeight: 19 };
-      instance.shadow = { scrollHeight: 19 };
+      instance.singlelineShadowRef = { scrollHeight: 19 };
+      instance.shadowRef = { scrollHeight: 19 };
       wrapper.setProps({ value: 'fo' });
       assert.strictEqual(wrapper.state().height, 19);
-      instance.shadow = { scrollHeight: 48 };
+      instance.shadowRef = { scrollHeight: 48 };
       wrapper.setProps({ value: 'foooooo' });
       assert.strictEqual(wrapper.state().height, 48);
     });
@@ -86,8 +86,8 @@ describe('<Textarea />', () => {
       const instance = wrapper.instance();
       const rowsMax = 4;
       const lineHeight = 19;
-      instance.singlelineShadow = { scrollHeight: lineHeight };
-      instance.shadow = { scrollHeight: lineHeight * 5 };
+      instance.singlelineShadowRef = { scrollHeight: lineHeight };
+      instance.shadowRef = { scrollHeight: lineHeight * 5 };
       wrapper.setProps({ rowsMax });
       assert.strictEqual(wrapper.state().height, lineHeight * rowsMax);
     });
@@ -99,10 +99,10 @@ describe('<Textarea />', () => {
 
     const refs = assignRefs(wrapper);
     // this is needed to trigger the resize
-    refs.input.simulate('change', { target: { value: 'x' } });
+    refs.inputRef.simulate('change', { target: { value: 'x' } });
     assert.strictEqual(wrapper.instance().value, 'x');
     // this is needed to trigger the resize
-    refs.input.simulate('change', { target: { value: '' } });
+    refs.inputRef.simulate('change', { target: { value: '' } });
     assert.strictEqual(wrapper.instance().value, '');
   });
 
@@ -122,7 +122,7 @@ describe('<Textarea />', () => {
 
       const refs = assignRefs(wrapper);
       const event = { target: { value: 'xx' } };
-      refs.input.simulate('change', event);
+      refs.inputRef.simulate('change', event);
       assert.strictEqual(wrapper.instance().value, 'xx');
       assert.strictEqual(handleChange.callCount, 1);
       assert.deepEqual(handleChange.args[0], [event]);
@@ -143,8 +143,8 @@ describe('<Textarea />', () => {
     it('should handle the resize event', () => {
       const wrapper = shallow(<Textarea />);
       const refs = assignRefs(wrapper);
-      refs.textareaShadow.scrollHeight = 43;
-      refs.singlelineShadow.scrollHeight = 43;
+      refs.textareaShadowRef.scrollHeight = 43;
+      refs.singlelineShadowRef.scrollHeight = 43;
       wrapper
         .find('EventListener')
         .at(0)
diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
index 3fca222309225c..6218e65a0ac492 100644
--- a/packages/material-ui/src/Menu/Menu.js
+++ b/packages/material-ui/src/Menu/Menu.js
@@ -31,7 +31,7 @@ export const styles = {
 };
 
 class Menu extends React.Component {
-  menuList = null;
+  menuListRef = null;
 
   componentDidMount() {
     if (this.props.open && this.props.disableAutoFocusItem !== true) {
@@ -40,20 +40,20 @@ class Menu extends React.Component {
   }
 
   getContentAnchorEl = () => {
-    if (!this.menuList || !this.menuList.selectedItem) {
-      return ReactDOM.findDOMNode(this.menuList).firstChild;
+    if (!this.menuListRef || !this.menuListRef.selectedItemRef) {
+      return ReactDOM.findDOMNode(this.menuListRef).firstChild;
     }
 
-    return ReactDOM.findDOMNode(this.menuList.selectedItem);
+    return ReactDOM.findDOMNode(this.menuListRef.selectedItemRef);
   };
 
   focus = () => {
-    if (this.menuList && this.menuList.selectedItem) {
-      ReactDOM.findDOMNode(this.menuList.selectedItem).focus();
+    if (this.menuListRef && this.menuListRef.selectedItemRef) {
+      ReactDOM.findDOMNode(this.menuListRef.selectedItemRef).focus();
       return;
     }
 
-    const menuList = ReactDOM.findDOMNode(this.menuList);
+    const menuList = ReactDOM.findDOMNode(this.menuListRef);
     if (menuList && menuList.firstChild) {
       menuList.firstChild.focus();
     }
@@ -61,7 +61,7 @@ class Menu extends React.Component {
 
   handleEnter = element => {
     const { disableAutoFocusItem, theme } = this.props;
-    const menuList = ReactDOM.findDOMNode(this.menuList);
+    const menuList = ReactDOM.findDOMNode(this.menuListRef);
 
     // Focus so the scroll computation of the Popover works as expected.
     if (disableAutoFocusItem !== true) {
@@ -124,8 +124,8 @@ class Menu extends React.Component {
           data-mui-test="Menu"
           onKeyDown={this.handleListKeyDown}
           {...MenuListProps}
-          ref={node => {
-            this.menuList = node;
+          ref={ref => {
+            this.menuListRef = ref;
           }}
         >
           {children}
diff --git a/packages/material-ui/src/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js
index 166c4a9f2f0b7b..e3fef169db0764 100644
--- a/packages/material-ui/src/Menu/Menu.test.js
+++ b/packages/material-ui/src/Menu/Menu.test.js
@@ -183,27 +183,27 @@ describe('<Menu />', () => {
     });
 
     it('should call menuList focus when no menuList', () => {
-      delete instance.menuList;
+      delete instance.menuListRef;
       instance.handleEnter(elementForHandleEnter);
       assert.strictEqual(selectedItemFocusSpy.callCount, 0);
       assert.strictEqual(menuListFocusSpy.callCount, 1);
     });
 
-    it('should call menuList focus when menuList but no menuList.selectedItem ', () => {
-      instance.menuList = {};
-      delete instance.menuList.selectedItem;
+    it('should call menuList focus when menuList but no menuList.selectedItemRef ', () => {
+      instance.menuListRef = {};
+      delete instance.menuListRef.selectedItemRef;
       instance.handleEnter(elementForHandleEnter);
       assert.strictEqual(selectedItemFocusSpy.callCount, 0);
       assert.strictEqual(menuListFocusSpy.callCount, 1);
     });
 
-    describe('menuList.selectedItem exists', () => {
+    describe('menuList.selectedItemRef exists', () => {
       before(() => {
-        instance.menuList = {};
-        instance.menuList.selectedItem = SELECTED_ITEM_KEY;
+        instance.menuListRef = {};
+        instance.menuListRef.selectedItemRef = SELECTED_ITEM_KEY;
       });
 
-      it('should call selectedItem focus when there is a menuList.selectedItem', () => {
+      it('should call selectedItem focus when there is a menuList.selectedItemRef', () => {
         instance.handleEnter(elementForHandleEnter);
         assert.strictEqual(selectedItemFocusSpy.callCount, 1);
         assert.strictEqual(menuListFocusSpy.callCount, 0);
diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js
index a5c3882cce648a..06dcce689aca7d 100644
--- a/packages/material-ui/src/MenuList/MenuList.js
+++ b/packages/material-ui/src/MenuList/MenuList.js
@@ -9,9 +9,9 @@ import ownerDocument from '../utils/ownerDocument';
 import List from '../List';
 
 class MenuList extends React.Component {
-  list = null;
+  listRef = null;
 
-  selectedItem = null;
+  selectedItemRef = null;
 
   blurTimer = null;
 
@@ -33,8 +33,8 @@ class MenuList extends React.Component {
 
   handleBlur = event => {
     this.blurTimer = setTimeout(() => {
-      if (this.list) {
-        const list = ReactDOM.findDOMNode(this.list);
+      if (this.listRef) {
+        const list = this.listRef;
         const currentFocus = ownerDocument(list).activeElement;
         if (!list.contains(currentFocus)) {
           this.resetTabIndex();
@@ -48,7 +48,7 @@ class MenuList extends React.Component {
   };
 
   handleKeyDown = event => {
-    const list = ReactDOM.findDOMNode(this.list);
+    const list = this.listRef;
     const key = keycode(event);
     const currentFocus = ownerDocument(list).activeElement;
 
@@ -56,8 +56,8 @@ class MenuList extends React.Component {
       (key === 'up' || key === 'down') &&
       (!currentFocus || (currentFocus && !list.contains(currentFocus)))
     ) {
-      if (this.selectedItem) {
-        ReactDOM.findDOMNode(this.selectedItem).focus();
+      if (this.selectedItemRef) {
+        this.selectedItemRef.focus();
       } else {
         list.firstChild.focus();
       }
@@ -79,7 +79,7 @@ class MenuList extends React.Component {
   };
 
   handleItemFocus = event => {
-    const list = ReactDOM.findDOMNode(this.list);
+    const list = this.listRef;
     if (list) {
       for (let i = 0; i < list.children.length; i += 1) {
         if (list.children[i] === event.currentTarget) {
@@ -92,7 +92,7 @@ class MenuList extends React.Component {
 
   focus() {
     const { currentTabIndex } = this.state;
-    const list = ReactDOM.findDOMNode(this.list);
+    const list = this.listRef;
     if (!list || !list.children || !list.firstChild) {
       return;
     }
@@ -105,7 +105,7 @@ class MenuList extends React.Component {
   }
 
   resetTabIndex() {
-    const list = ReactDOM.findDOMNode(this.list);
+    const list = this.listRef;
     const currentFocus = ownerDocument(list).activeElement;
 
     const items = [];
@@ -119,8 +119,8 @@ class MenuList extends React.Component {
       return this.setTabIndex(currentFocusIndex);
     }
 
-    if (this.selectedItem) {
-      return this.setTabIndex(items.indexOf(ReactDOM.findDOMNode(this.selectedItem)));
+    if (this.selectedItemRef) {
+      return this.setTabIndex(items.indexOf(this.selectedItemRef));
     }
 
     return this.setTabIndex(0);
@@ -132,8 +132,8 @@ class MenuList extends React.Component {
     return (
       <List
         role="menu"
-        ref={node => {
-          this.list = node;
+        ref={ref => {
+          this.listRef = ReactDOM.findDOMNode(ref);
         }}
         className={className}
         onKeyDown={this.handleKeyDown}
@@ -156,8 +156,8 @@ class MenuList extends React.Component {
           return React.cloneElement(child, {
             tabIndex: index === this.state.currentTabIndex ? 0 : -1,
             ref: child.props.selected
-              ? node => {
-                  this.selectedItem = node;
+              ? ref => {
+                  this.selectedItemRef = ReactDOM.findDOMNode(ref);
                 }
               : undefined,
             onFocus: this.handleItemFocus,
diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
index 24b9f7293bd3e9..4080ea76ebe870 100644
--- a/packages/material-ui/src/Modal/Modal.js
+++ b/packages/material-ui/src/Modal/Modal.js
@@ -283,8 +283,8 @@ class Modal extends React.Component {
 
     return (
       <Portal
-        ref={node => {
-          this.mountNode = node ? node.getMountNode() : node;
+        ref={ref => {
+          this.mountNode = ref ? ref.getMountNode() : ref;
         }}
         container={container}
         disablePortal={disablePortal}
@@ -292,8 +292,8 @@ class Modal extends React.Component {
       >
         <div
           data-mui-test="Modal"
-          ref={node => {
-            this.modalRef = node;
+          ref={ref => {
+            this.modalRef = ref;
           }}
           className={classNames(classes.root, className, {
             [classes.hidden]: exited,
@@ -304,8 +304,8 @@ class Modal extends React.Component {
             <BackdropComponent open={open} onClick={this.handleBackdropClick} {...BackdropProps} />
           )}
           <RootRef
-            rootRef={node => {
-              this.dialogRef = node;
+            rootRef={ref => {
+              this.dialogRef = ref;
             }}
           >
             {React.cloneElement(children, childProps)}
diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
index 3aa73d393331e8..8c6689ded6ff26 100644
--- a/packages/material-ui/src/Popover/Popover.js
+++ b/packages/material-ui/src/Popover/Popover.js
@@ -90,8 +90,7 @@ class Popover extends React.Component {
   handleGetOffsetLeft = getOffsetLeft;
 
   handleResize = debounce(() => {
-    const element = ReactDOM.findDOMNode(this.paperRef);
-    this.setPositioningStyles(element);
+    this.setPositioningStyles(this.paperRef);
   }, 166); // Corresponds to 10 frames at 60 Hz.
 
   componentDidMount() {
@@ -209,8 +208,7 @@ class Popover extends React.Component {
     }
 
     // If an anchor element wasn't provided, just use the parent body element of this Popover
-    const anchorElement =
-      getAnchorEl(anchorEl) || ownerDocument(ReactDOM.findDOMNode(this.paperRef)).body;
+    const anchorElement = getAnchorEl(anchorEl) || ownerDocument(this.paperRef).body;
     const anchorRect = anchorElement.getBoundingClientRect();
     const anchorVertical = contentAnchorOffset === 0 ? anchorOrigin.vertical : 'center';
 
@@ -327,8 +325,8 @@ class Popover extends React.Component {
             className={classes.paper}
             data-mui-test="Popover"
             elevation={elevation}
-            ref={node => {
-              this.paperRef = node;
+            ref={ref => {
+              this.paperRef = ReactDOM.findDOMNode(ref);
             }}
             {...PaperProps}
           >
diff --git a/packages/material-ui/src/Portal/Portal.test.js b/packages/material-ui/src/Portal/Portal.test.js
index 28e5bba1b36980..c096ef678a37a6 100644
--- a/packages/material-ui/src/Portal/Portal.test.js
+++ b/packages/material-ui/src/Portal/Portal.test.js
@@ -145,11 +145,11 @@ describe('<Portal />', () => {
           return (
             <div>
               <div
-                ref={node => {
-                  this.container = node;
+                ref={ref => {
+                  this.containerRef = ref;
                 }}
               />
-              <Portal container={() => this.container}>
+              <Portal container={() => this.containerRef}>
                 <div id="test1" />
               </Portal>
             </div>
@@ -195,8 +195,8 @@ describe('<Portal />', () => {
           return (
             <div>
               <div
-                ref={node => {
-                  this.container = node;
+                ref={ref => {
+                  this.containerRef = ref;
                 }}
               />
               <Portal container={this.state.container}>
@@ -210,7 +210,7 @@ describe('<Portal />', () => {
       const wrapper = mount(<ContainerTest />);
 
       assert.strictEqual(document.querySelector('#test3').parentNode.nodeName, 'BODY');
-      wrapper.setState({ container: wrapper.instance().container });
+      wrapper.setState({ container: wrapper.instance().containerRef });
       assert.strictEqual(document.querySelector('#test3').parentNode.nodeName, 'DIV');
     });
 
diff --git a/packages/material-ui/src/RootRef/RootRef.test.js b/packages/material-ui/src/RootRef/RootRef.test.js
index d523301197b66d..6c0619b35c477f 100644
--- a/packages/material-ui/src/RootRef/RootRef.test.js
+++ b/packages/material-ui/src/RootRef/RootRef.test.js
@@ -18,7 +18,7 @@ describe('<RootRef />', () => {
     const Fn = () => <div />;
     const results = [];
     const wrapper = mount(
-      <RootRef rootRef={node => results.push(node)}>
+      <RootRef rootRef={ref => results.push(ref)}>
         <Fn />
       </RootRef>,
     );
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 8f2f731256f55a..94a5b79494b42f 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -12,7 +12,7 @@ import { isFilled } from '../Input/Input';
 class SelectInput extends React.Component {
   ignoreNextBlur = false;
 
-  displayNode = null;
+  displayRef = null;
 
   isOpenControlled = this.props.open !== undefined;
 
@@ -25,13 +25,13 @@ class SelectInput extends React.Component {
     if (this.isOpenControlled && this.props.open) {
       // Focus the display node so the focus is restored on this element once
       // the menu is closed.
-      this.displayNode.focus();
-      // Rerender with the resolve `displayNode` reference.
+      this.displayRef.focus();
+      // Rerender with the resolve `displayRef` reference.
       this.forceUpdate();
     }
 
     if (this.props.autoFocus) {
-      this.displayNode.focus();
+      this.displayRef.focus();
     }
   }
 
@@ -47,7 +47,7 @@ class SelectInput extends React.Component {
 
     this.setState({
       // Perfom the layout computation outside of the render method.
-      menuMinWidth: this.props.autoWidth ? null : this.displayNode.clientWidth,
+      menuMinWidth: this.props.autoWidth ? null : this.displayRef.clientWidth,
       open,
     });
   };
@@ -128,11 +128,11 @@ class SelectInput extends React.Component {
     }
   };
 
-  handleDisplayRef = node => {
-    this.displayNode = node;
+  handleDisplayRef = ref => {
+    this.displayRef = ref;
   };
 
-  handleInputRef = node => {
+  handleInputRef = ref => {
     const { inputRef } = this.props;
 
     if (!inputRef) {
@@ -140,7 +140,7 @@ class SelectInput extends React.Component {
     }
 
     const nodeProxy = {
-      node,
+      node: ref,
       // By pass the native input as we expose a rich object (array).
       value: this.props.value,
     };
@@ -180,7 +180,7 @@ class SelectInput extends React.Component {
       value,
       ...other
     } = this.props;
-    const open = this.isOpenControlled && this.displayNode ? openProp : this.state.open;
+    const open = this.isOpenControlled && this.displayRef ? openProp : this.state.open;
 
     delete other['aria-invalid'];
 
@@ -248,8 +248,8 @@ class SelectInput extends React.Component {
     // Avoid performing a layout computation in the render method.
     let menuMinWidth = this.state.menuMinWidth;
 
-    if (!autoWidth && this.isOpenControlled && this.displayNode) {
-      menuMinWidth = this.displayNode.clientWidth;
+    if (!autoWidth && this.isOpenControlled && this.displayRef) {
+      menuMinWidth = this.displayRef.clientWidth;
     }
 
     let tabIndex;
@@ -297,7 +297,7 @@ class SelectInput extends React.Component {
         <IconComponent className={classes.icon} />
         <Menu
           id={`menu-${name || ''}`}
-          anchorEl={this.displayNode}
+          anchorEl={this.displayRef}
           open={open}
           onClose={this.handleClose}
           {...MenuProps}
diff --git a/packages/material-ui/src/Select/SelectInput.test.js b/packages/material-ui/src/Select/SelectInput.test.js
index 559c6cfaf303dc..e148fcdc7cde66 100644
--- a/packages/material-ui/src/Select/SelectInput.test.js
+++ b/packages/material-ui/src/Select/SelectInput.test.js
@@ -244,7 +244,7 @@ describe('<SelectInput />', () => {
     it('should take the anchor width into account', () => {
       const wrapper = shallow(<SelectInput {...defaultProps} />);
       const instance = wrapper.instance();
-      instance.displayNode = { clientWidth: 14 };
+      instance.displayRef = { clientWidth: 14 };
       instance.update({ open: true });
       wrapper.update();
       assert.strictEqual(wrapper.find(Menu).props().PaperProps.style.minWidth, 14);
@@ -253,7 +253,7 @@ describe('<SelectInput />', () => {
     it('should not take the anchor width into account', () => {
       const wrapper = shallow(<SelectInput {...defaultProps} autoWidth />);
       const instance = wrapper.instance();
-      instance.displayNode = { clientWidth: 14 };
+      instance.displayRef = { clientWidth: 14 };
       instance.update({ open: true });
       wrapper.update();
       assert.strictEqual(wrapper.find(Menu).props().PaperProps.style.minWidth, null);
diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js
index 2f88e0be205968..37b6badf281ed8 100644
--- a/packages/material-ui/src/Slide/Slide.js
+++ b/packages/material-ui/src/Slide/Slide.js
@@ -83,9 +83,8 @@ class Slide extends React.Component {
       return;
     }
 
-    const node = ReactDOM.findDOMNode(this.transition);
-    if (node) {
-      setTranslateValue(this.props, node);
+    if (this.transitionRef) {
+      setTranslateValue(this.props, this.transitionRef);
     }
   }, 166); // Corresponds to 10 frames at 60 Hz.
 
@@ -175,10 +174,9 @@ class Slide extends React.Component {
   };
 
   updatePosition() {
-    const node = ReactDOM.findDOMNode(this.transition);
-    if (node) {
-      node.style.visibility = 'inherit';
-      setTranslateValue(this.props, node);
+    if (this.transitionRef) {
+      this.transitionRef.style.visibility = 'inherit';
+      setTranslateValue(this.props, this.transitionRef);
     }
   }
 
@@ -218,8 +216,8 @@ class Slide extends React.Component {
           onExited={this.handleExited}
           appear
           style={style}
-          ref={node => {
-            this.transition = node;
+          ref={ref => {
+            this.transitionRef = ReactDOM.findDOMNode(ref);
           }}
           {...other}
         >
diff --git a/packages/material-ui/src/Slide/Slide.test.js b/packages/material-ui/src/Slide/Slide.test.js
index ab53fd32863b11..a85d221f34d684 100644
--- a/packages/material-ui/src/Slide/Slide.test.js
+++ b/packages/material-ui/src/Slide/Slide.test.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy, useFakeTimers } from 'sinon';
-import ReactDOM from 'react-dom';
 import Transition from 'react-transition-group/Transition';
 import { createShallow, createMount, unwrap } from '../test-utils';
 import Slide, { setTranslateValue } from './Slide';
@@ -123,7 +122,7 @@ describe('<Slide />', () => {
       const wrapper = mount(
         <SlideNaked {...defaultProps} theme={createMuiTheme()} in={false} direction="left" />,
       );
-      const transition = ReactDOM.findDOMNode(wrapper.instance().transition);
+      const transition = wrapper.instance().transitionRef;
 
       const transition1 = transition.style.transform;
       wrapper.setProps({
@@ -240,10 +239,9 @@ describe('<Slide />', () => {
           <div>Foo</div>
         </SlideNaked>,
       );
-      const transition = ReactDOM.findDOMNode(wrapper.instance().transition);
+      const transition = wrapper.instance().transitionRef;
 
       assert.strictEqual(transition.style.visibility, 'inherit');
-
       assert.notStrictEqual(transition.style.transform, undefined);
     });
   });
@@ -268,7 +266,7 @@ describe('<Slide />', () => {
       const instance = wrapper.instance();
       instance.handleResize();
       clock.tick(166);
-      const transition = ReactDOM.findDOMNode(instance.transition);
+      const transition = instance.transitionRef;
 
       assert.notStrictEqual(transition.style.transform, undefined);
     });
diff --git a/packages/material-ui/src/Tab/Tab.js b/packages/material-ui/src/Tab/Tab.js
index 8943e7335928ba..eb82ff9098cb8b 100644
--- a/packages/material-ui/src/Tab/Tab.js
+++ b/packages/material-ui/src/Tab/Tab.js
@@ -138,8 +138,8 @@ class Tab extends React.Component {
   };
 
   checkTextWrap = () => {
-    if (this.label) {
-      const labelWrapped = this.label.getClientRects().length > 1;
+    if (this.labelRef) {
+      const labelWrapped = this.labelRef.getClientRects().length > 1;
       if (this.state.labelWrapped !== labelWrapped) {
         this.setState({ labelWrapped });
       }
@@ -171,8 +171,8 @@ class Tab extends React.Component {
             className={classNames(classes.label, {
               [classes.labelWrapped]: this.state.labelWrapped,
             })}
-            ref={node => {
-              this.label = node;
+            ref={ref => {
+              this.labelRef = ref;
             }}
           >
             {labelProp}
diff --git a/packages/material-ui/src/Tab/Tab.test.js b/packages/material-ui/src/Tab/Tab.test.js
index 6583e4aea58406..24b4fc7b8c01af 100644
--- a/packages/material-ui/src/Tab/Tab.test.js
+++ b/packages/material-ui/src/Tab/Tab.test.js
@@ -79,7 +79,7 @@ describe('<Tab />', () => {
     it('should render with text wrapping', () => {
       const wrapper = shallow(<Tab textColor="inherit" label="foo" />);
       const instance = wrapper.instance();
-      instance.label = { getClientRects: stub().returns({ length: 2 }) };
+      instance.labelRef = { getClientRects: stub().returns({ length: 2 }) };
       instance.checkTextWrap();
       wrapper.update();
       const label = wrapper
@@ -146,6 +146,6 @@ describe('<Tab />', () => {
     const instance = mount(
       <TabNaked textColor="inherit" label="foo" classes={classes} />,
     ).instance();
-    assert.isDefined(instance.label, 'should be defined');
+    assert.isDefined(instance.labelRef, 'should be defined');
   });
 });
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js
index a8736f2901935a..f0cb64ec6447ad 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.js
@@ -4,10 +4,10 @@ import EventListener from 'react-event-listener';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 
 const styles = {
-  width: '100px',
-  height: '100px',
+  width: 100,
+  height: 100,
   position: 'absolute',
-  top: '-10000px',
+  top: -10000,
   overflow: 'scroll',
   msOverflowStyle: 'scrollbar',
 };
@@ -42,12 +42,14 @@ class ScrollbarSize extends React.Component {
   }
 
   setMeasurements = () => {
-    if (!this.node) {
+    const nodeRef = this.nodeRef;
+
+    if (!nodeRef) {
       return;
     }
 
-    this.scrollbarHeight = this.node.offsetHeight - this.node.clientHeight;
-    this.scrollbarWidth = this.node.offsetWidth - this.node.clientWidth;
+    this.scrollbarHeight = nodeRef.offsetHeight - nodeRef.clientHeight;
+    this.scrollbarWidth = nodeRef.offsetWidth - nodeRef.clientWidth;
   };
 
   render() {
@@ -58,8 +60,8 @@ class ScrollbarSize extends React.Component {
         {onChange ? <EventListener target="window" onResize={this.handleResize} /> : null}
         <div
           style={styles}
-          ref={node => {
-            this.node = node;
+          ref={ref => {
+            this.nodeRef = ref;
           }}
         />
       </div>
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.test.js b/packages/material-ui/src/Tabs/ScrollbarSize.test.js
index 9d41189c73a383..b7f0df0c35e6eb 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.test.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.test.js
@@ -53,7 +53,7 @@ describe('<ScrollbarSize />', () => {
       onChange = spy();
       wrapper = shallow(<ScrollbarSize {...defaultProps} onChange={onChange} />);
       const instance = wrapper.instance();
-      instance.node = {
+      instance.nodeRef = {
         offsetHeight: 17,
         clientHeight: 0,
         offsetWidth: 17,
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index ae0a5176f6d93b..553eec39bee9dc 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -149,22 +149,22 @@ class Tabs extends React.Component {
 
   getTabsMeta = (value, direction) => {
     let tabsMeta;
-    if (this.tabs) {
-      const rect = this.tabs.getBoundingClientRect();
+    if (this.tabsRef) {
+      const rect = this.tabsRef.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,
+        clientWidth: this.tabsRef.clientWidth,
+        scrollLeft: this.tabsRef.scrollLeft,
+        scrollLeftNormalized: getNormalizedScrollLeft(this.tabsRef, direction),
+        scrollWidth: this.tabsRef.scrollWidth,
         left: rect.left,
         right: rect.right,
       };
     }
 
     let tabMeta;
-    if (this.tabs && value !== false) {
-      const children = this.tabs.children[0].children;
+    if (this.tabsRef && value !== false) {
+      const children = this.tabsRef.children[0].children;
 
       if (children.length > 0) {
         const tab = children[this.valueToIndex.get(value)];
@@ -176,14 +176,14 @@ class Tabs extends React.Component {
   };
 
   handleLeftScrollClick = () => {
-    if (this.tabs) {
-      this.moveTabsScroll(-this.tabs.clientWidth);
+    if (this.tabsRef) {
+      this.moveTabsScroll(-this.tabsRef.clientWidth);
     }
   };
 
   handleRightScrollClick = () => {
-    if (this.tabs) {
-      this.moveTabsScroll(this.tabs.clientWidth);
+    if (this.tabsRef) {
+      this.moveTabsScroll(this.tabsRef.clientWidth);
     }
   };
 
@@ -198,12 +198,12 @@ class Tabs extends React.Component {
   moveTabsScroll = delta => {
     const { theme } = this.props;
 
-    if (this.tabs) {
+    if (this.tabsRef) {
       const multiplier = theme.direction === 'rtl' ? -1 : 1;
-      const nextScrollLeft = this.tabs.scrollLeft + delta * multiplier;
+      const nextScrollLeft = this.tabsRef.scrollLeft + delta * multiplier;
       // Fix for Edge
       const invert = theme.direction === 'rtl' && detectScrollType() === 'reverse' ? -1 : 1;
-      scroll.left(this.tabs, invert * nextScrollLeft);
+      scroll.left(this.tabsRef, invert * nextScrollLeft);
     }
   };
 
@@ -218,20 +218,20 @@ class Tabs extends React.Component {
     if (tabMeta.left < tabsMeta.left) {
       // left side of button is out of view
       const nextScrollLeft = tabsMeta.scrollLeft + (tabMeta.left - tabsMeta.left);
-      scroll.left(this.tabs, nextScrollLeft);
+      scroll.left(this.tabsRef, nextScrollLeft);
     } else if (tabMeta.right > tabsMeta.right) {
       // right side of button is out of view
       const nextScrollLeft = tabsMeta.scrollLeft + (tabMeta.right - tabsMeta.right);
-      scroll.left(this.tabs, nextScrollLeft);
+      scroll.left(this.tabsRef, nextScrollLeft);
     }
   };
 
   updateScrollButtonState = () => {
     const { scrollable, scrollButtons, theme } = this.props;
 
-    if (this.tabs && scrollable && scrollButtons !== 'off') {
-      const { scrollWidth, clientWidth } = this.tabs;
-      const scrollLeft = getNormalizedScrollLeft(this.tabs, theme.direction);
+    if (this.tabsRef && scrollable && scrollButtons !== 'off') {
+      const { scrollWidth, clientWidth } = this.tabsRef;
+      const scrollLeft = getNormalizedScrollLeft(this.tabsRef, theme.direction);
 
       const showLeftScroll =
         theme.direction === 'rtl' ? scrollWidth > clientWidth + scrollLeft : scrollLeft > 0;
@@ -367,8 +367,8 @@ class Tabs extends React.Component {
           <div
             className={scrollerClassName}
             style={this.state.scrollerStyle}
-            ref={node => {
-              this.tabs = node;
+            ref={ref => {
+              this.tabsRef = ref;
             }}
             role="tablist"
             onScroll={this.handleTabsScroll}
diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js
index 2275ad1811e5b4..a86f319f9a549f 100644
--- a/packages/material-ui/src/Tabs/Tabs.test.js
+++ b/packages/material-ui/src/Tabs/Tabs.test.js
@@ -374,7 +374,7 @@ describe('<Tabs />', () => {
 
     it('should response to scroll events', () => {
       const instance = wrapper.instance();
-      instance.tabs = { scrollLeft: 100, ...fakeTabs };
+      instance.tabsRef = { scrollLeft: 100, ...fakeTabs };
       spy(instance, 'updateScrollButtonState');
       const selector = `.${classes.scroller}.${classes.scrollable}`;
       wrapper.find(selector).simulate('scroll');
@@ -500,28 +500,28 @@ describe('<Tabs />', () => {
       });
 
       it('should set neither left nor right scroll button state', () => {
-        instance.tabs = { scrollLeft: 0, scrollWidth: 90, clientWidth: 100, ...fakeTabs };
+        instance.tabsRef = { scrollLeft: 0, scrollWidth: 90, clientWidth: 100, ...fakeTabs };
         instance.updateScrollButtonState();
         assert.strictEqual(wrapper.state().showLeftScroll, false, 'left scroll should be false');
         assert.strictEqual(wrapper.state().showRightScroll, false, 'right scroll should be false');
       });
 
       it('should set only left scroll button state', () => {
-        instance.tabs = { scrollLeft: 1, ...fakeTabs };
+        instance.tabsRef = { scrollLeft: 1, ...fakeTabs };
         instance.updateScrollButtonState();
         assert.strictEqual(wrapper.state().showLeftScroll, true, 'left scroll should be true');
         assert.strictEqual(wrapper.state().showRightScroll, false, 'right scroll should be false');
       });
 
       it('should set only right scroll button state', () => {
-        instance.tabs = { scrollLeft: 0, scrollWidth: 110, clientWidth: 100, ...fakeTabs };
+        instance.tabsRef = { scrollLeft: 0, scrollWidth: 110, clientWidth: 100, ...fakeTabs };
         instance.updateScrollButtonState();
         assert.strictEqual(wrapper.state().showLeftScroll, false, 'left scroll should be false');
         assert.strictEqual(wrapper.state().showRightScroll, true, 'right scroll should be true');
       });
 
       it('should set both left and right scroll button state', () => {
-        instance.tabs = { scrollLeft: 1, scrollWidth: 110, clientWidth: 100, ...fakeTabs };
+        instance.tabsRef = { scrollLeft: 1, scrollWidth: 110, clientWidth: 100, ...fakeTabs };
         instance.updateScrollButtonState();
         assert.strictEqual(wrapper.state().showLeftScroll, true, 'left scroll should be true');
         assert.strictEqual(wrapper.state().showRightScroll, true, 'right scroll should be true');
@@ -542,7 +542,7 @@ describe('<Tabs />', () => {
         </Tabs>,
       );
       instance = wrapper.instance();
-      instance.tabs = dimensions;
+      instance.tabsRef = dimensions;
       scrollSpy = spy(instance, 'moveTabsScroll');
     });
 
diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js
index 3665010fc4b339..1bf6d826317990 100644
--- a/packages/material-ui/src/Tooltip/Tooltip.js
+++ b/packages/material-ui/src/Tooltip/Tooltip.js
@@ -320,8 +320,8 @@ class Tooltip extends React.Component {
     return (
       <React.Fragment>
         <RootRef
-          rootRef={node => {
-            this.childrenRef = node;
+          rootRef={ref => {
+            this.childrenRef = ref;
           }}
         >
           {React.cloneElement(children, childrenProps)}
diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js
index 0c50626679e68b..5388e0cced5a8b 100644
--- a/packages/material-ui/test/integration/Menu.test.js
+++ b/packages/material-ui/test/integration/Menu.test.js
@@ -123,7 +123,7 @@ describe('<Menu> integration', () => {
       assert.strictEqual(menuEl, null, 'should not render the menu to the DOM');
     });
 
-    it('should focus the selected item', () => {
+    it('should focus the 3rd selected item', () => {
       wrapper.setState({ open: true });
       const portalLayer = wrapper
         .find('Portal')
@@ -147,7 +147,7 @@ describe('<Menu> integration', () => {
       assert.strictEqual(wrapper.state().open, false, 'should have closed');
     });
 
-    it('should focus the selected item', () => {
+    it('should focus the 2nd selected item', () => {
       wrapper.setState({ open: true });
       const portalLayer = wrapper
         .find('Portal')