Fix: Properly attach ref to Field's rendered input element

Previous approach tried to ref the Field component, which doesn't work.
Now wrapping the render/children function to inject the ref into the
actual input element that Field renders.

Changes:
- Renamed rootRef to fieldRef for clarity
- Added findInput() helper called in componentDidMount/Update
- Wrap render/children function to clone element with merged ref
- Merge innerRef with fieldRef to support both internal and external refs

This ensures we get access to the actual DOM input element for HTML5
validation while maintaining React 19 compatibility (no findDOMNode).

Author: erikras-dinesh-agent

src/Html5ValidationField.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Field } from 'react-final-form'
+import { Field, FieldRenderProps } from 'react-final-form'
 import { Html5ValidationFieldProps } from './types'
 import warning from './warning'
 
@@ -23,7 +23,7 @@ interface WithValidity {
 
 class Html5ValidationField extends React.Component<Html5ValidationFieldProps> {
   private input: WithValidity | null = null
-  private rootRef = React.createRef<HTMLElement>()
+  private fieldRef = React.createRef<any>()
 
   static defaultProps = {
     badInput: 'Incorrect input',
@@ -42,7 +42,17 @@ class Html5ValidationField extends React.Component<Html5ValidationFieldProps> {
   }
 
   componentDidMount(): void {
-    const root = this.rootRef.current
+    this.findInput()
+  }
+
+  componentDidUpdate(): void {
+    if (!this.input) {
+      this.findInput()
+    }
+  }
+
+  private findInput = (): void => {
+    const root = this.fieldRef.current
     if (root) {
       let input: WithValidity | null = null
       if (/input|textarea|select/.test(root.nodeName.toLowerCase())) {
@@ -120,6 +130,9 @@ class Html5ValidationField extends React.Component<Html5ValidationFieldProps> {
       typeMismatch,
       valueMissing,
       innerRef,
+      component,
+      render,
+      children,
       ...rest
     } = this.props
 
@@ -137,23 +150,38 @@ class Html5ValidationField extends React.Component<Html5ValidationFieldProps> {
       ...fieldProps
     } = rest
 
-    // Merge innerRef with rootRef for internal use
+    // Merge innerRef with fieldRef
     const mergedRef = (node: HTMLElement | null) => {
-      // Set internal ref
-      (this.rootRef as React.MutableRefObject<HTMLElement | null>).current = node
-      // Call innerRef if provided
+      (this.fieldRef as React.MutableRefObject<HTMLElement | null>).current = node
       if (typeof innerRef === 'function') {
         innerRef(node)
       } else if (innerRef) {
         (innerRef as React.MutableRefObject<HTMLElement | null>).current = node
       }
     }
 
+    // Wrap render function to inject ref
+    const wrappedRender = (fieldProps: FieldRenderProps<any, HTMLElement>) => {
+      // Call user's render/children function if provided
+      const userRender = render || children
+      if (userRender && typeof userRender === 'function') {
+        const element = userRender(fieldProps)
+        // Clone and inject ref
+        return React.isValidElement(element)
+          ? React.cloneElement(element, { ref: mergedRef } as any)
+          : element
+      }
+      // Default: render input with ref
+      return React.createElement(component || 'input', {
+        ...fieldProps.input,
+        ref: mergedRef
+      })
+    }
+
     return React.createElement(Field, {
       ...fieldProps,
       validate: this.validate,
-      ref: mergedRef,
-      component: 'input'
+      children: wrappedRender
     })
   }
 }