Fix EuiValidatableControl's ref handling

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed bug in all input fields placeholders in Safari that weren't vertically centered ([#3809](https://github.com/elastic/eui/pull/3809))
+- Fixed bug in EUI's input field components where their `inputRef` couldn't be a `RefObject` ([#3822](https://github.com/elastic/eui/pull/3822))
 
 ## [`27.3.0`](https://github.com/elastic/eui/tree/v27.3.0)
 

src/components/form/validatable_control/validatable_control.test.tsx

@@ -18,7 +18,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 
 import { EuiValidatableControl } from './validatable_control';
 
@@ -32,4 +32,34 @@ describe('EuiValidatableControl', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('ref management', () => {
+    it('calls a ref function', () => {
+      const ref = jest.fn();
+
+      mount(
+        <EuiValidatableControl>
+          <input id="testInput" ref={ref} />
+        </EuiValidatableControl>
+      );
+
+      expect(ref).toHaveBeenCalledTimes(1);
+
+      const input = ref.mock.calls[0][0];
+      expect(input.getAttribute('id')).toBe('testInput');
+    });
+
+    it('sets a ref object\'s "current" property', () => {
+      const ref: React.RefObject<HTMLInputElement> = { current: null };
+
+      mount(
+        <EuiValidatableControl>
+          <input id="testInput" ref={ref} />
+        </EuiValidatableControl>
+      );
+
+      expect(ref.current).not.toBeNull();
+      expect(ref.current!.getAttribute('id')).toBe('testInput');
+    });
+  });
 });

src/components/form/validatable_control/validatable_control.tsx

@@ -17,15 +17,28 @@
  * under the License.
  */
 
-import { Children, cloneElement, Component, ReactElement } from 'react';
+import {
+  Children,
+  cloneElement,
+  Component,
+  MutableRefObject,
+  ReactElement,
+  Ref,
+} from 'react';
 import { CommonProps } from '../../common';
 
 export interface HTMLConstraintValidityElement extends Element {
   setCustomValidity: (error: string) => void;
 }
 
 export interface ReactElementWithRef extends ReactElement {
-  ref?: (element: HTMLConstraintValidityElement) => void;
+  ref?: Ref<HTMLConstraintValidityElement>;
+}
+
+function isMutableRef(
+  ref?: Ref<HTMLConstraintValidityElement>
+): ref is MutableRefObject<HTMLConstraintValidityElement> {
+  return ref != null && ref.hasOwnProperty('current');
 }
 
 export interface EuiValidatableControlProps {
@@ -68,6 +81,8 @@ export class EuiValidatableControl extends Component<
     const { ref } = this.props.children;
     if (typeof ref === 'function') {
       ref(element);
+    } else if (isMutableRef(ref)) {
+      ref.current = element;
     }
   };