From 0b06244d30a3aa1c99cafd1fbcb01a8fa55dcdd8 Mon Sep 17 00:00:00 2001
From: Duong Tran <tranthaiduong1210@gmail.com>
Date: Fri, 8 Jun 2018 07:45:20 +1000
Subject: [PATCH] [core] Add React.createRef support (#11757)

* feat: make input accept both ref callback and ref from React.createRef

* feat: update [TextArea] to accept React.createRef object as inputRef

* feat: update typescript and proptypes declaration for inputRef

* test: add inputRef test for input

* simpler logic
---
 .size-limit.js                                |  2 +-
 packages/material-ui/src/Checkbox/Checkbox.js |  2 +-
 .../src/FormControlLabel/FormControlLabel.js  |  2 +-
 packages/material-ui/src/Input/Input.d.ts     |  2 +-
 packages/material-ui/src/Input/Input.js       | 16 ++++++++++++---
 packages/material-ui/src/Input/Input.test.js  | 14 +++++++++++++
 packages/material-ui/src/Input/Textarea.d.ts  |  2 +-
 packages/material-ui/src/Input/Textarea.js    | 12 ++++++++---
 .../material-ui/src/Input/Textarea.test.js    | 10 ++++++++--
 .../src/NativeSelect/NativeSelectInput.js     |  2 +-
 packages/material-ui/src/Radio/Radio.js       |  2 +-
 .../material-ui/src/Select/SelectInput.js     | 20 +++++++++++++------
 .../src/Select/SelectInput.test.js            |  8 ++++++++
 packages/material-ui/src/Switch/Switch.js     |  2 +-
 .../material-ui/src/TextField/TextField.d.ts  |  2 +-
 .../material-ui/src/TextField/TextField.js    |  2 +-
 .../material-ui/src/internal/SwitchBase.js    |  2 +-
 pages/api/checkbox.md                         |  2 +-
 pages/api/form-control-label.md               |  2 +-
 pages/api/input.md                            |  2 +-
 pages/api/radio.md                            |  2 +-
 pages/api/switch-base.md                      |  2 +-
 pages/api/switch.md                           |  2 +-
 pages/api/text-field.md                       |  2 +-
 24 files changed, 84 insertions(+), 32 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index ac662de364d6d8..abd3066a57eddc 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: '94.6 KB',
+    limit: '94.7 KB',
   },
   {
     name: 'The main bundle of the docs',
diff --git a/packages/material-ui/src/Checkbox/Checkbox.js b/packages/material-ui/src/Checkbox/Checkbox.js
index 3a892075f2d991..abb53cc99c0594 100644
--- a/packages/material-ui/src/Checkbox/Checkbox.js
+++ b/packages/material-ui/src/Checkbox/Checkbox.js
@@ -98,7 +98,7 @@ Checkbox.propTypes = {
   /**
    * Use that property to pass a ref callback to the native input component.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Callback fired when the state is changed.
    *
diff --git a/packages/material-ui/src/FormControlLabel/FormControlLabel.js b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
index 5d2f8ae0a7143f..da5db998b6e7fd 100644
--- a/packages/material-ui/src/FormControlLabel/FormControlLabel.js
+++ b/packages/material-ui/src/FormControlLabel/FormControlLabel.js
@@ -116,7 +116,7 @@ FormControlLabel.propTypes = {
   /**
    * Use that property to pass a ref callback to the native input component.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The text to be used in an enclosing label element.
    */
diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts
index 2481d86255cc7c..0cb45b5e29dbc6 100644
--- a/packages/material-ui/src/Input/Input.d.ts
+++ b/packages/material-ui/src/Input/Input.d.ts
@@ -18,7 +18,7 @@ export interface InputProps
   id?: string;
   inputComponent?: React.ReactType<InputComponentProps>;
   inputProps?: { [arbitrary: string]: any };
-  inputRef?: React.Ref<any>;
+  inputRef?: React.Ref<any> | React.RefObject<any>;
   margin?: 'dense';
   multiline?: boolean;
   name?: string;
diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js
index 28d15859d25855..074a8b42aa5bfe 100644
--- a/packages/material-ui/src/Input/Input.js
+++ b/packages/material-ui/src/Input/Input.js
@@ -323,10 +323,20 @@ class Input extends React.Component {
   handleRefInput = node => {
     this.input = node;
 
+    let ref;
+
     if (this.props.inputRef) {
-      this.props.inputRef(node);
+      ref = this.props.inputRef;
     } else if (this.props.inputProps && this.props.inputProps.ref) {
-      this.props.inputProps.ref(node);
+      ref = this.props.inputProps.ref;
+    }
+
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
     }
   };
 
@@ -541,7 +551,7 @@ Input.propTypes = {
   /**
    * Use that property to pass a ref callback to the native input component.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * If `dense`, will adjust vertical spacing. This is normally obtained via context from
    * FormControl.
diff --git a/packages/material-ui/src/Input/Input.test.js b/packages/material-ui/src/Input/Input.test.js
index 38df091d39f4a3..ceacbec735343b 100644
--- a/packages/material-ui/src/Input/Input.test.js
+++ b/packages/material-ui/src/Input/Input.test.js
@@ -471,4 +471,18 @@ describe('<Input />', () => {
       assert.strictEqual(wrapper.childAt(1).type(), InputAdornment);
     });
   });
+
+  describe('prop: inputRef', () => {
+    it('should be able to return the input node via a ref object', () => {
+      const ref = React.createRef();
+      mount(<Input inputRef={ref} />);
+      assert.strictEqual(ref.current.tagName, 'INPUT');
+    });
+
+    it('should be able to return the textarea node via a ref object', () => {
+      const ref = React.createRef();
+      mount(<Input multiline inputRef={ref} />);
+      assert.strictEqual(ref.current.tagName, 'TEXTAREA');
+    });
+  });
 });
diff --git a/packages/material-ui/src/Input/Textarea.d.ts b/packages/material-ui/src/Input/Textarea.d.ts
index 25411b272077f6..9029b97da16cb3 100644
--- a/packages/material-ui/src/Input/Textarea.d.ts
+++ b/packages/material-ui/src/Input/Textarea.d.ts
@@ -11,7 +11,7 @@ export interface TextareaProps
   disabled?: boolean;
   rows?: string | number;
   rowsMax?: string | number;
-  textareaRef?: React.Ref<any>;
+  textareaRef?: React.Ref<any> | React.RefObject<any>;
   value?: string;
 }
 
diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js
index 06f867287dc334..9ec321ed76ff06 100644
--- a/packages/material-ui/src/Input/Textarea.js
+++ b/packages/material-ui/src/Input/Textarea.js
@@ -115,8 +115,14 @@ class Textarea extends React.Component {
 
   handleRefInput = node => {
     this.input = node;
-    if (this.props.textareaRef) {
-      this.props.textareaRef(node);
+
+    const { textareaRef } = this.props;
+    if (textareaRef) {
+      if (typeof textareaRef === 'function') {
+        textareaRef(node);
+      } else {
+        textareaRef.current = node;
+      }
     }
   };
 
@@ -224,7 +230,7 @@ Textarea.propTypes = {
   /**
    * Use that property to pass a ref callback to the native textarea element.
    */
-  textareaRef: PropTypes.func,
+  textareaRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * @ignore
    */
diff --git a/packages/material-ui/src/Input/Textarea.test.js b/packages/material-ui/src/Input/Textarea.test.js
index 5ab8ad26ebdad8..6e6f6a4023b630 100644
--- a/packages/material-ui/src/Input/Textarea.test.js
+++ b/packages/material-ui/src/Input/Textarea.test.js
@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react';
 import { assert } from 'chai';
 import { spy, useFakeTimers } from 'sinon';
@@ -156,4 +154,12 @@ describe('<Textarea />', () => {
       assert.strictEqual(wrapper.state().height, 43);
     });
   });
+
+  describe('prop: textareaRef', () => {
+    it('should be able to return the input node via a ref object', () => {
+      const ref = React.createRef();
+      mount(<Textarea textareaRef={ref} />);
+      assert.strictEqual(ref.current.tagName, 'TEXTAREA');
+    });
+  });
 });
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
index 8eec53d76bf608..481581a6bc1373 100644
--- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js
+++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js
@@ -69,7 +69,7 @@ NativeSelectInput.propTypes = {
   /**
    * Use that property to pass a ref callback to the native select element.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Name attribute of the `select` or hidden `input` element.
    */
diff --git a/packages/material-ui/src/Radio/Radio.js b/packages/material-ui/src/Radio/Radio.js
index 6ae177045a630c..726988a9c6d5f9 100644
--- a/packages/material-ui/src/Radio/Radio.js
+++ b/packages/material-ui/src/Radio/Radio.js
@@ -90,7 +90,7 @@ Radio.propTypes = {
   /**
    * Use that property to pass a ref callback to the native input component.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Callback fired when the state is changed.
    *
diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js
index 5b3b835c05018d..9ab151fa6fc6a5 100644
--- a/packages/material-ui/src/Select/SelectInput.js
+++ b/packages/material-ui/src/Select/SelectInput.js
@@ -142,16 +142,24 @@ class SelectInput extends React.Component {
     this.updateDisplayWidth();
   };
 
-  handleSelectRef = node => {
-    if (!this.props.inputRef) {
+  handleInputRef = node => {
+    const { inputRef } = this.props;
+
+    if (!inputRef) {
       return;
     }
 
-    this.props.inputRef({
+    const nodeProxy = {
       node,
       // By pass the native input as we expose a rich object (array).
       value: this.props.value,
-    });
+    };
+
+    if (typeof inputRef === 'function') {
+      inputRef(nodeProxy);
+    } else {
+      inputRef.current = nodeProxy;
+    }
   };
 
   render() {
@@ -276,7 +284,7 @@ class SelectInput extends React.Component {
           value={Array.isArray(value) ? value.join(',') : value}
           name={name}
           readOnly={readOnly}
-          ref={this.handleSelectRef}
+          ref={this.handleInputRef}
           type={type}
           {...other}
         />
@@ -345,7 +353,7 @@ SelectInput.propTypes = {
   /**
    * Use that property to pass a ref callback to the native select element.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Properties applied to the `Menu` element.
    */
diff --git a/packages/material-ui/src/Select/SelectInput.test.js b/packages/material-ui/src/Select/SelectInput.test.js
index 61ec689ae25ea2..d1ab35bc0e49b3 100644
--- a/packages/material-ui/src/Select/SelectInput.test.js
+++ b/packages/material-ui/src/Select/SelectInput.test.js
@@ -327,4 +327,12 @@ describe('<SelectInput />', () => {
       });
     });
   });
+
+  describe('prop: inputRef', () => {
+    it('should be able to return the input node via a ref object', () => {
+      const ref = React.createRef();
+      mount(<SelectInput {...defaultProps} inputRef={ref} />);
+      assert.strictEqual(ref.current.node.tagName, 'INPUT');
+    });
+  });
 });
diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js
index 1c652aa3103f5e..9c6922b408ce13 100644
--- a/packages/material-ui/src/Switch/Switch.js
+++ b/packages/material-ui/src/Switch/Switch.js
@@ -156,7 +156,7 @@ Switch.propTypes = {
   /**
    * Use that property to pass a ref callback to the native input component.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Callback fired when the state is changed.
    *
diff --git a/packages/material-ui/src/TextField/TextField.d.ts b/packages/material-ui/src/TextField/TextField.d.ts
index 88c1d28fb70428..d31b3e1e24a627 100644
--- a/packages/material-ui/src/TextField/TextField.d.ts
+++ b/packages/material-ui/src/TextField/TextField.d.ts
@@ -22,7 +22,7 @@ export interface TextFieldProps
   InputLabelProps?: Partial<InputLabelProps>;
   InputProps?: Partial<InputProps>;
   inputProps?: InputProps['inputProps'];
-  inputRef?: React.Ref<any>;
+  inputRef?: React.Ref<any> | React.RefObject<any>;
   label?: React.ReactNode;
   margin?: PropTypes.Margin;
   multiline?: boolean;
diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
index 99b3265dd3b9b4..6caf6f4642fa22 100644
--- a/packages/material-ui/src/TextField/TextField.js
+++ b/packages/material-ui/src/TextField/TextField.js
@@ -195,7 +195,7 @@ TextField.propTypes = {
   /**
    * Use that property to pass a ref callback to the native input component.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The label content.
    */
diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
index 681abb22dc1ddc..4298908c932121 100644
--- a/packages/material-ui/src/internal/SwitchBase.js
+++ b/packages/material-ui/src/internal/SwitchBase.js
@@ -181,7 +181,7 @@ SwitchBase.propTypes = {
   /**
    * Use that property to pass a ref callback to the native input component.
    */
-  inputRef: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /*
    * @ignore
    */
diff --git a/pages/api/checkbox.md b/pages/api/checkbox.md
index 7aa1e145b8675d..57be6b67946b58 100644
--- a/pages/api/checkbox.md
+++ b/pages/api/checkbox.md
@@ -23,7 +23,7 @@ filename: /packages/material-ui/src/Checkbox/Checkbox.js
 | <span class="prop-name">indeterminate</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the component appears indeterminate. |
 | <span class="prop-name">indeterminateIcon</span> | <span class="prop-type">node | <span class="prop-default">&lt;IndeterminateCheckBoxIcon /></span> | The icon to display when the component is indeterminate. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Properties applied to the `input` element. |
-| <span class="prop-name">inputRef</span> | <span class="prop-type">func |   | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string |   | The input component property `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
diff --git a/pages/api/form-control-label.md b/pages/api/form-control-label.md
index 91a4afdd3833f7..90f662daeee772 100644
--- a/pages/api/form-control-label.md
+++ b/pages/api/form-control-label.md
@@ -17,7 +17,7 @@ Use this component if you want to display an extra label.
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">control</span> | <span class="prop-type">element |   | A control element. For instance, it can be be a `Radio`, a `Switch` or a `Checkbox`. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool |   | If `true`, the control will be disabled. |
-| <span class="prop-name">inputRef</span> | <span class="prop-type">func |   | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">label</span> | <span class="prop-type">node |   | The text to be used in an enclosing label element. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   |  |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
diff --git a/pages/api/input.md b/pages/api/input.md
index 3897d69e0b8e34..454afe33f69f44 100644
--- a/pages/api/input.md
+++ b/pages/api/input.md
@@ -25,7 +25,7 @@ filename: /packages/material-ui/src/Input/Input.js
 | <span class="prop-name">id</span> | <span class="prop-type">string |   | The id of the `input` element. |
 | <span class="prop-name">inputComponent</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |   | The component used for the native input. Either a string to use a DOM element or a component. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `input` element. |
-| <span class="prop-name">inputRef</span> | <span class="prop-type">func |   | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> |   | If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl. |
 | <span class="prop-name">multiline</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, a textarea element will be rendered. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   | Name attribute of the `input` element. |
diff --git a/pages/api/radio.md b/pages/api/radio.md
index 9ab7620de05346..8e0f386f8417f6 100644
--- a/pages/api/radio.md
+++ b/pages/api/radio.md
@@ -21,7 +21,7 @@ filename: /packages/material-ui/src/Radio/Radio.js
 | <span class="prop-name">icon</span> | <span class="prop-type">node |   | The icon to display when the component is unchecked. |
 | <span class="prop-name">id</span> | <span class="prop-type">string |   | The id of the `input` element. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `input` element. |
-| <span class="prop-name">inputRef</span> | <span class="prop-type">func |   | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.value`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string |   | The input component property `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
diff --git a/pages/api/switch-base.md b/pages/api/switch-base.md
index 6260565edc19c9..b815d5fbd05b70 100644
--- a/pages/api/switch-base.md
+++ b/pages/api/switch-base.md
@@ -22,7 +22,7 @@ filename: /packages/material-ui/src/internal/SwitchBase.js
 | <span class="prop-name">indeterminate</span> | <span class="prop-type">bool |   | If `true`, the component appears indeterminate. |
 | <span class="prop-name">indeterminateIcon</span> | <span class="prop-type">node |   | The icon to display when the component is indeterminate. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `input` element. |
-| <span class="prop-name">inputRef</span> | <span class="prop-type">func |   | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">name</span> | <span class="prop-type">string |   |  |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string | <span class="prop-default">'checkbox'</span> | The input component property `type`. |
diff --git a/pages/api/switch.md b/pages/api/switch.md
index 2c510805e837e5..e2db31439cdb58 100644
--- a/pages/api/switch.md
+++ b/pages/api/switch.md
@@ -21,7 +21,7 @@ filename: /packages/material-ui/src/Switch/Switch.js
 | <span class="prop-name">icon</span> | <span class="prop-type">node |   | The icon to display when the component is unchecked. |
 | <span class="prop-name">id</span> | <span class="prop-type">string |   | The id of the `input` element. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the `input` element. |
-| <span class="prop-name">inputRef</span> | <span class="prop-type">func |   | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">onChange</span> | <span class="prop-type">func |   | Callback fired when the state is changed.<br><br>**Signature:**<br>`function(event: object, checked: boolean) => void`<br>*event:* The event source of the callback. You can pull out the new value by accessing `event.target.checked`.<br>*checked:* The `checked` value of the switch |
 | <span class="prop-name">type</span> | <span class="prop-type">string |   | The input component property `type`. |
 | <span class="prop-name">value</span> | <span class="prop-type">string |   | The value of the component. |
diff --git a/pages/api/text-field.md b/pages/api/text-field.md
index 83d4a763f832c6..53ed6d81a54c25 100644
--- a/pages/api/text-field.md
+++ b/pages/api/text-field.md
@@ -49,7 +49,7 @@ For advanced cases, please look at the source of TextField by clicking on the
 | <span class="prop-name">InputLabelProps</span> | <span class="prop-type">object |   | Properties applied to the `InputLabel` element. |
 | <span class="prop-name">InputProps</span> | <span class="prop-type">object |   | Properties applied to the `Input` element. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object |   | Attributes applied to the native `input` element. |
-| <span class="prop-name">inputRef</span> | <span class="prop-type">func |   | Use that property to pass a ref callback to the native input component. |
+| <span class="prop-name">inputRef</span> | <span class="prop-type">union:&nbsp;func&nbsp;&#124;<br>&nbsp;object<br> |   | Use that property to pass a ref callback to the native input component. |
 | <span class="prop-name">label</span> | <span class="prop-type">node |   | The label content. |
 | <span class="prop-name">margin</span> | <span class="prop-type">enum:&nbsp;'none'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'normal'<br> |   | If `dense` or `normal`, will adjust vertical spacing of this and contained components. |
 | <span class="prop-name">multiline</span> | <span class="prop-type">bool |   | If `true`, a textarea element will be rendered instead of an input. |