VEuPathDB · bobular · Nov 14, 2025
diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx
@@ -1,7 +1,6 @@
 import { memoize, uniq } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { useLayoutEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
 import { scrollIntoViewIfNeeded } from '../../Utils/DomUtils';
 import { Seq } from '../../Utils/IterableUtils';
 import { areTermsInString, makeSearchHelpText } from '../../Utils/SearchUtils';
@@ -64,8 +63,8 @@ export default class FieldList extends React.Component {
     }
   }
 
-  handleCheckboxTreeRef(component) {
-    this.treeDomNode = ReactDOM.findDOMNode(component);
+  handleCheckboxTreeRef(node) {
+    this.treeDomNode = node;
   }
 
   handleExpansionChange(expandedNodes) {

diff --git a/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx b/packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx
@@ -12,7 +12,6 @@ import {
 } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { lazy } from '../../Utils/ComponentUtils';
 import { Seq } from '../../Utils/IterableUtils';
 import DateRangeSelector from '../../Components/InputControls/DateRangeSelector';
@@ -68,6 +67,7 @@ var Histogram = (function () {
       super(props);
       this.handleResize = throttle(this.handleResize.bind(this), 100);
       this.emitStateChange = debounce(this.emitStateChange, 100);
+      this.containerRef = React.createRef();
       this.state = {
         uiState: this.getStateFromProps(props),
         showSettings:
@@ -80,7 +80,7 @@ var Histogram = (function () {
 
     componentDidMount() {
       $(window).on('resize', this.handleResize);
-      $(ReactDOM.findDOMNode(this))
+      $(this.containerRef.current)
         .on('plotselected .chart', this.handlePlotSelected.bind(this))
         .on('plotselecting .chart', this.handlePlotSelecting.bind(this))
         .on('plotunselected .chart', this.handlePlotUnselected.bind(this))
@@ -416,7 +416,7 @@ var Histogram = (function () {
 
       if (this.plot) this.plot.destroy();
 
-      this.$chart = $(ReactDOM.findDOMNode(this)).find('.chart');
+      this.$chart = $(this.containerRef.current).find('.chart');
       this.plot = $.plot(this.$chart, seriesData, plotOptions);
     }
 
@@ -656,7 +656,7 @@ var Histogram = (function () {
       );
 
       return (
-        <div className="chart-container">
+        <div ref={this.containerRef} className="chart-container">
           <div className="chart"></div>
           <div className="chart-title y-axis">
             <div>{yaxisLabel}</div>

diff --git a/packages/libs/wdk-client/src/Components/Display/Sticky.jsx b/packages/libs/wdk-client/src/Components/Display/Sticky.jsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
 class Sticky extends React.Component {
   constructor(props) {
     super(props);
     this.updateIsFixed = this.updateIsFixed.bind(this);
+    this.containerRef = React.createRef();
     this.state = { isFixed: false, height: null, width: null };
   }
 
   componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.node = this.containerRef.current;
     window.addEventListener('scroll', this.updateIsFixed, { passive: true });
     window.addEventListener('wheel', this.updateIsFixed, { passive: true });
     window.addEventListener('resize', this.updateIsFixed, { passive: true });
@@ -47,7 +47,7 @@ class Sticky extends React.Component {
   render() {
     return (
       // This node is used to track scroll position
-      <div style={{ height: this.state.height }}>
+      <div ref={this.containerRef} style={{ height: this.state.height }}>
         {this.props.children(this.state)}
       </div>
     );

diff --git a/packages/libs/wdk-client/src/Components/InputControls/IndeterminateCheckbox.tsx b/packages/libs/wdk-client/src/Components/InputControls/IndeterminateCheckbox.tsx
@@ -1,4 +1,3 @@
-import ReactDOM from 'react-dom';
 import React from 'react';
 import FormEvent = React.FormEvent;
 
@@ -18,6 +17,8 @@ export type IndeterminateCheckboxProps<T> = {
 export default class IndeterminateCheckbox<T> extends React.Component<
   IndeterminateCheckboxProps<T>
 > {
+  private inputRef = React.createRef<HTMLInputElement>();
+
   constructor(props: IndeterminateCheckboxProps<T>) {
     super(props);
 
@@ -39,8 +40,10 @@ export default class IndeterminateCheckbox<T> extends React.Component<
    * @param indeterminate
    */
   setIndeterminate(indeterminate: boolean) {
-    const node = ReactDOM.findDOMNode(this) as HTMLInputElement;
-    node.indeterminate = indeterminate;
+    const node = this.inputRef.current;
+    if (node) {
+      node.indeterminate = indeterminate;
+    }
   }
 
   handleChange(e: FormEvent<HTMLInputElement>) {
@@ -53,6 +56,7 @@ export default class IndeterminateCheckbox<T> extends React.Component<
     let nameProp = this.props.name ? { name: this.props.name } : {};
     return (
       <input
+        ref={this.inputRef}
         type="checkbox"
         {...nameProp}
         className={this.props.className}

diff --git a/packages/libs/wdk-client/src/Components/Loading/Loading.tsx b/packages/libs/wdk-client/src/Components/Loading/Loading.tsx
@@ -1,6 +1,5 @@
 import { flow } from 'lodash';
 import React from 'react';
-import { findDOMNode } from 'react-dom';
 import { Spinner } from 'spin.js';
 import { delay, wrappable } from '../../Utils/ComponentUtils';
 
@@ -31,6 +30,7 @@ type Props = {
  */
 class Loading extends React.Component<Props> {
   private spinner?: Spinner;
+  private containerRef = React.createRef<HTMLDivElement>();
 
   componentDidMount() {
     const { radius = 8, top = '50%', left = '50%' } = this.props;
@@ -52,8 +52,10 @@ class Loading extends React.Component<Props> {
       top, // Top position relative to parent
       left, // Left position relative to parent
     };
-    const node = findDOMNode(this) as HTMLElement;
-    this.spinner = new Spinner(opts).spin(node);
+    const node = this.containerRef.current;
+    if (node) {
+      this.spinner = new Spinner(opts).spin(node);
+    }
   }
 
   componentWillUnmount() {
@@ -63,7 +65,7 @@ class Loading extends React.Component<Props> {
   render() {
     const { className = '', style } = this.props;
     return (
-      <div style={style} className={`wdk-Loading ${className}`}>
+      <div ref={this.containerRef} style={style} className={`wdk-Loading ${className}`}>
         {this.props.children}
       </div>
     );

diff --git a/packages/libs/wdk-client/src/Components/Overlays/Popup.tsx b/packages/libs/wdk-client/src/Components/Overlays/Popup.tsx
@@ -186,8 +186,9 @@ class Popup extends React.Component<Props> {
 
   render() {
     const children = React.cloneElement(this.props.children, {
-      ref: (c: React.ReactInstance | null) =>
-        (this.popupNode = c && (ReactDOM.findDOMNode(c) as HTMLElement)),
+      ref: (node: HTMLElement | null) => {
+        this.popupNode = node;
+      },
     });
     const content = (
       <TabbableContainer autoFocus className={this.props.className || ''}>

diff --git a/packages/libs/wdk-client/src/Controllers/LegacyParamController.tsx b/packages/libs/wdk-client/src/Controllers/LegacyParamController.tsx
@@ -1,6 +1,5 @@
 import { debounce, get } from 'lodash';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 import {
   updateActiveQuestion,
@@ -48,6 +47,7 @@ class LegacyParamController extends ViewController<Props> {
   static readonly PARAM_INVALID_EVENT = 'param-invalid';
 
   paramModules = ParamModules;
+  private containerRef = React.createRef<HTMLDivElement>();
 
   componentWillUnmount() {
     const { searchName } = this.props.own;
@@ -93,7 +93,7 @@ class LegacyParamController extends ViewController<Props> {
       });
     }
 
-    const node = ReactDOM.findDOMNode(this);
+    const node = this.containerRef.current;
 
     // Trigger event in case of question error
     if (
@@ -165,16 +165,17 @@ class LegacyParamController extends ViewController<Props> {
         : '');
 
     return (
-      <div>
+      <div ref={this.containerRef}>
         <div style={{ color: 'red', fontSize: '1.4em', fontWeight: 500 }}>
           {errorMessage}
         </div>
 
         {isProbablyRevise && [
-          <div style={{ fontWeight: 'bold', padding: '1em 0' }}>
+          <div key="label" style={{ fontWeight: 'bold', padding: '1em 0' }}>
             Current value:
           </div>,
           <div
+            key="value"
             style={{ maxHeight: 300, overflow: 'auto', background: '#f3f3f3' }}
           >
             <pre>
@@ -197,7 +198,7 @@ class LegacyParamController extends ViewController<Props> {
 
     if (this.props.mapped.paramErrors[parameter.name]) {
       return (
-        <div>
+        <div ref={this.containerRef}>
           <div
             style={{
               color: 'red',
@@ -231,7 +232,7 @@ class LegacyParamController extends ViewController<Props> {
     );
 
     return (
-      <div>
+      <div ref={this.containerRef}>
         <this.paramModules.ParamComponent
           ctx={ctx}
           parameter={parameter}

diff --git a/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx b/packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx
@@ -1,6 +1,5 @@
 import { debounce } from 'lodash';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { HelpTrigger } from '@veupathdb/coreui/lib/components/Mesa';
 import { Tooltip } from '@veupathdb/coreui';
 import { wrappable } from '../../Utils/ComponentUtils';
@@ -28,6 +27,8 @@ class AnswerFilter extends React.Component {
     this.selectAll = this.selectAll.bind(this);
     this.clearAll = this.clearAll.bind(this);
 
+    this.filterInputRef = React.createRef();
+
     let { filterAttributes, filterTables } = this.props;
     this.state = {
       showFilterFieldSelector: false,
@@ -53,7 +54,7 @@ class AnswerFilter extends React.Component {
   }
 
   handleFilter() {
-    let value = ReactDOM.findDOMNode(this.refs.filterInput).value;
+    let value = this.filterInputRef.current.value;
     let { filterAttributes, filterTables } = this.state;
     this.props.onFilter(value, filterAttributes, filterTables);
   }
@@ -146,7 +147,7 @@ class AnswerFilter extends React.Component {
     return (
       <div className="wdk-Answer-filter">
         <input
-          ref="filterInput"
+          ref={this.filterInputRef}
           className="wdk-Answer-filterInput"
           defaultValue={filterTerm}
           placeholder={`Search ${displayNamePlural}`}

diff --git a/packages/libs/wdk-client/src/Views/Records/RecordUI.jsx b/packages/libs/wdk-client/src/Views/Records/RecordUI.jsx
@@ -1,7 +1,6 @@
 import classnames from 'classnames';
 import { debounce, get, isEqual, memoize } from 'lodash';
 import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
 import { getAncestors, getId } from '../../Utils/CategoryUtils';
 import { wrappable } from '../../Utils/ComponentUtils';
 import { findAncestorNode } from '../../Utils/DomUtils';
@@ -26,14 +25,18 @@ class RecordUI extends Component {
     // We are assuming this value will not change
     this.getHeaderOffset = memoize(this.getHeaderOffset);
 
-    this.recordMainSectionNode = null;
+    this.recordMainSectionRef = React.createRef();
     this.activeSectionTop = null;
 
     this.state = {
       activeSectionId: null,
     };
   }
 
+  get recordMainSectionNode() {
+    return this.recordMainSectionRef.current;
+  }
+
   componentDidMount() {
     this._scrollToActiveSection(true);
     this.monitorActiveSection();
@@ -217,7 +220,7 @@ class RecordUI extends Component {
           </div>
           <div className="wdk-RecordMain">
             <RecordMainSection
-              ref={(c) => (this.recordMainSectionNode = findDOMNode(c))}
+              ref={this.recordMainSectionRef}
               record={this.props.record}
               recordClass={this.props.recordClass}
               categories={this.props.categoryTree.children}