Port work to fix issue with using refs, original work: chrisronline@8…

…d50f6f (#13624)
elastic · Sep 19, 2017 · 710775a · 710775a
1 parent 1e4e0ae
commit 710775a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/ui_framework/src/components/form/field_text/field_text.js b/ui_framework/src/components/form/field_text/field_text.js
@@ -19,6 +19,7 @@ export const KuiFieldText = ({
   className,
   icon,
   isInvalid,
+  inputRef,
   ...rest,
 }) => {
   const classes = classNames('kuiFieldText', className, {
@@ -39,6 +40,7 @@ export const KuiFieldText = ({
           placeholder={placeholder}
           className={classes}
           value={value}
+          ref={inputRef}
           {...rest}
         />
       </KuiValidatableControl>
@@ -53,6 +55,7 @@ KuiFieldText.propTypes = {
   value: PropTypes.string,
   icon: PropTypes.string,
   isInvalid: PropTypes.bool,
+  inputRef: PropTypes.func,
 };
 
 KuiFieldText.defaultProps = {

diff --git a/ui_framework/src/components/form/validatable_control/validatable_control.js b/ui_framework/src/components/form/validatable_control/validatable_control.js
@@ -28,7 +28,15 @@ export class KuiValidatableControl extends Component {
 
   render() {
     return cloneElement(this.props.children, {
-      ref: node => { this.control = node; },
+      ref: node => {
+        this.control = node;
+
+        // Call the original ref, if any
+        const { ref } = this.props.children;
+        if (typeof ref === 'function') {
+          ref(node);
+        }
+      },
     });
   }
 }