Skip to content

Commit 280ce65

Browse files
Fix: Remove ReactDOM.findDOMNode for React 19 compatibility
Replace findDOMNode with React refs to support React 19 where findDOMNode has been removed. Changes: - Removed ReactDOM import (no longer needed) - Added rootRef using React.createRef<HTMLElement>() - Replaced ReactDOM.findDOMNode(this) with this.rootRef.current - Merged innerRef and rootRef in render to maintain both internal and external ref functionality Per CodeRabbit feedback on PR #37.
1 parent 3cce32f commit 280ce65

1 file changed

Lines changed: 15 additions & 3 deletions

File tree

src/Html5ValidationField.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react'
2-
import ReactDOM from 'react-dom'
32
import { Field } from 'react-final-form'
43
import { Html5ValidationFieldProps } from './types'
54
import warning from './warning'
@@ -24,6 +23,7 @@ interface WithValidity {
2423

2524
class Html5ValidationField extends React.Component<Html5ValidationFieldProps> {
2625
private input: WithValidity | null = null
26+
private rootRef = React.createRef<HTMLElement>()
2727

2828
static defaultProps = {
2929
badInput: 'Incorrect input',
@@ -42,7 +42,7 @@ class Html5ValidationField extends React.Component<Html5ValidationFieldProps> {
4242
}
4343

4444
componentDidMount(): void {
45-
const root = ReactDOM.findDOMNode(this)
45+
const root = this.rootRef.current
4646
if (root) {
4747
let input: WithValidity | null = null
4848
if (/input|textarea|select/.test(root.nodeName.toLowerCase())) {
@@ -137,10 +137,22 @@ class Html5ValidationField extends React.Component<Html5ValidationFieldProps> {
137137
...fieldProps
138138
} = rest
139139

140+
// Merge innerRef with rootRef for internal use
141+
const mergedRef = (node: HTMLElement | null) => {
142+
// Set internal ref
143+
(this.rootRef as React.MutableRefObject<HTMLElement | null>).current = node
144+
// Call innerRef if provided
145+
if (typeof innerRef === 'function') {
146+
innerRef(node)
147+
} else if (innerRef) {
148+
(innerRef as React.MutableRefObject<HTMLElement | null>).current = node
149+
}
150+
}
151+
140152
return React.createElement(Field, {
141153
...fieldProps,
142154
validate: this.validate,
143-
ref: innerRef as React.Ref<HTMLElement>,
155+
ref: mergedRef,
144156
component: 'input'
145157
})
146158
}

0 commit comments

Comments
 (0)