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', () => {