React-dom findDOMNode is being removed in React 19

[anomiex]

Impacted plugin

Jetpack

Quick summary

In React 19, the react-dom findDOMNode() function is being removed. More details on this are at https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-reactdom-finddomnode

I've already cleaned up most of the uses of findDOMNode() in the monorepo in #37380, but I couldn't figure out how to replace the uses in projects/plugins/jetpack/_inc/client/components/popover/index.jsx.

jetpack/projects/plugins/jetpack/_inc/client/components/popover/index.jsx

Lines 80 to 85 in 7d3a11f

	// update context (target) reference into a property
	if ( ! isDOMElement( nextProps.context ) ) {
	this.domContext = ReactDom.findDOMNode( nextProps.context );
	} else {
	this.domContext = nextProps.context;
	}

jetpack/projects/plugins/jetpack/_inc/client/components/popover/index.jsx

Lines 246 to 251 in 7d3a11f

	// store context (target) reference into a property
	if ( ! isDOMElement( this.props.context ) ) {
	this.domContext = ReactDom.findDOMNode( this.props.context );
	} else {
	this.domContext = this.props.context;
	}

jetpack/projects/plugins/jetpack/_inc/client/components/popover/index.jsx

Lines 198 to 205 in 7d3a11f

	if ( this.props.ignoreContext && shouldClose ) {
	const ignoreContext = ReactDom.findDOMNode( this.props.ignoreContext );
	shouldClose =
	shouldClose &&
	ignoreContext &&
	ignoreContext.contains &&
	! ignoreContext.contains( event.target );
	}

Since these are operating on an arbitrary React element passed in, we may need to change the interface for Popover to require an actual DOM node ref or something instead.

While this isn't a problem yet (React 19 is still in beta), eventually WordPress will start shipping it instead of React 18. At that point Popover will break, possibly breaking entire pages, so if we can clean this up ahead of time that would be useful.

Steps to reproduce

1. git grep findDOMNode

A clear and concise description of what you expected to happen.

No results calling the react-dom function of that name.

What actually happened

projects/plugins/jetpack/_inc/client/components/popover/index.jsx:                      this.domContext = ReactDom.findDOMNode( nextProps.context );
projects/plugins/jetpack/_inc/client/components/popover/index.jsx:                      const ignoreContext = ReactDom.findDOMNode( this.props.ignoreContext );
projects/plugins/jetpack/_inc/client/components/popover/index.jsx:                      this.domContext = ReactDom.findDOMNode( this.props.context );

Impact

All

Available workarounds?

There is no user impact (yet)

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

Logs or notes

No response