diff --git a/src/components/form/validatable_control/validatable_control.tsx b/src/components/form/validatable_control/validatable_control.tsx index e6bf8058c2e..3700cfb3163 100644 --- a/src/components/form/validatable_control/validatable_control.tsx +++ b/src/components/form/validatable_control/validatable_control.tsx @@ -1,29 +1,17 @@ -import { - Children, - cloneElement, - Component, - ReactElement, - ReactNode, -} from 'react'; +import { Children, cloneElement, Component, ReactElement } from 'react'; import { CommonProps } from '../../common'; -export type HTMLConstraintValidityElement = - | HTMLButtonElement - | HTMLFieldSetElement - | HTMLInputElement - | HTMLObjectElement - | HTMLOutputElement - | HTMLSelectElement - | HTMLTextAreaElement - | Element & { setCustomValidity?: any }; +export interface HTMLConstraintValidityElement extends Element { + setCustomValidity: (error: string) => void; +} -export type EuiNodeWithRef = ReactNode & { - ref?: (node: ReactNode) => void; -}; +export interface ReactElementWithRef extends ReactElement { + ref?: (element: HTMLConstraintValidityElement) => void; +} export interface EuiValidatableControlProps { isInvalid?: boolean; - children?: EuiNodeWithRef; + children: ReactElementWithRef; } export class EuiValidatableControl extends Component< @@ -54,19 +42,19 @@ export class EuiValidatableControl extends Component< this.updateValidity(); } - setRef = (node: HTMLConstraintValidityElement) => { - this.control = node; + setRef = (element: HTMLConstraintValidityElement) => { + this.control = element; // Call the original ref, if any - const { ref } = this.props.children as EuiNodeWithRef; + const { ref } = this.props.children; if (typeof ref === 'function') { - ref(node); + ref(element); } }; render() { const child = Children.only(this.props.children); - return cloneElement(child as ReactElement, { + return cloneElement(child, { ref: this.setRef, }); }