mui · oliviertassinari · Jul 22, 2018 · Jul 22, 2018
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -231,15 +231,15 @@ 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');
     });
 
     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', () => {