[EuiValidatableControl] Fixed ref not being handled properly when used with react-hook-form

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Fixed type mismatch between `EuiSelectable` options extended via `EuiSelectableOption` and internal option types ([#3983](https://github.com/elastic/eui/pull/3983))
 - Fixed `EuiButton` CSS for RTL languages by using `margin-inline-[pos]` instead of `margin-[pos]` ([#3974](https://github.com/elastic/eui/pull/3974))
 - Fix server-side rendering of `EuiBreadcrumbs` and `EuiCollapsibleNav` ([#3970](https://github.com/elastic/eui/pull/3970))
+- Fixed ref not being handled properly in `EuiValidatableControl` when used with [react-hook-form](https://react-hook-form.com/) ([#4001](https://github.com/elastic/eui/pull/4001))
 
 ## [`28.3.0`](https://github.com/elastic/eui/tree/v28.3.0)
 

src/components/form/validatable_control/validatable_control.tsx

@@ -77,22 +77,20 @@ export class EuiValidatableControl extends Component<
     this.updateValidity();
   }
 
-  setRef = (element: HTMLConstraintValidityElement) => {
-    this.control = element;
-
-    // Call the original ref, if any
-    const { ref } = this.props.children;
-    if (typeof ref === 'function') {
-      ref(element);
-    } else if (isMutableRef(ref)) {
-      ref.current = element;
-    }
-  };
-
   render() {
     const child = Children.only(this.props.children);
     return cloneElement(child, {
-      ref: this.setRef,
+      ref: (element: HTMLConstraintValidityElement) => {
+        this.control = element;
+
+        // Call the original ref, if any
+        const { ref } = this.props.children;
+        if (typeof ref === 'function') {
+          ref(element);
+        } else if (isMutableRef(ref)) {
+          ref.current = element;
+        }
+      },
     });
   }
 }