From 15ab71282abfd6e2224f87ef056b001a53b0333b Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Tue, 7 Dec 2021 23:53:09 +0100
Subject: [PATCH 01/10] refactor: use ref API instead of findDOMNode

---
 .../PushExperimentDropdown.react.js              | 11 ++++-------
 src/components/SliderWrap/SliderWrap.react.js    | 16 ++++++++++------
 .../SlowQueriesFilter/SlowQueriesFilter.react.js |  9 +++------
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js b/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
index e1efbb1c68..0977d85bd4 100644
--- a/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
+++ b/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
@@ -9,7 +9,6 @@ import Popover   from 'components/Popover/Popover.react';
 import PropTypes from 'lib/PropTypes';
 import Position  from 'lib/Position';
 import React     from 'react';
-import ReactDOM  from 'react-dom';
 import styles    from 'components/PushExperimentDropdown/PushExperimentDropdown.scss';
 
 export default class PushExperimentDropdown extends React.Component {
@@ -20,16 +19,14 @@ export default class PushExperimentDropdown extends React.Component {
       open: false,
       selected: false,
     };
+
+    this.dropdownRef = React.createRef();
   }
 
   componentWillMount() {
     this.styles = this.props.styles || styles;
   }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
-  }
-
   select(value, e) {
     e.stopPropagation();
     this.setState({ 
@@ -50,7 +47,7 @@ export default class PushExperimentDropdown extends React.Component {
       </div>
     );
     if (this.state.open) {
-      let position = Position.inWindow(this.node);
+      let position = Position.inWindow(this.dropdownRef);
       content = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
           <div style={widthStyle} className={[styles.menu, styles[color]].join(' ')}>
@@ -60,7 +57,7 @@ export default class PushExperimentDropdown extends React.Component {
       );
     }
     return (
-      <div style={widthStyle} className={styles.dropdown}>
+      <div style={widthStyle} className={styles.dropdown} ref={this.dropdownRef}>
         {content}
       </div>
     );
diff --git a/src/components/SliderWrap/SliderWrap.react.js b/src/components/SliderWrap/SliderWrap.react.js
index fdd7793cd5..747c370c51 100644
--- a/src/components/SliderWrap/SliderWrap.react.js
+++ b/src/components/SliderWrap/SliderWrap.react.js
@@ -6,14 +6,18 @@
  * the root directory of this source tree.
  */
 import { Directions } from 'lib/Constants';
-import React                   from 'react';
-import ReactDOM                from 'react-dom';
-import styles                  from 'components/SliderWrap/SliderWrap.scss';
+import React          from 'react';
+import styles         from 'components/SliderWrap/SliderWrap.scss';
 
 export default class SliderWrap extends React.Component {
+  constructor() {
+    super();
+
+    this.sliderRef = React.createRef();
+  }
+
   componentDidMount() {
-    let wrap = ReactDOM.findDOMNode(this);
-    this.metrics = wrap.children[0];
+    this.metrics = this.sliderRef.current.children[0];
     if (this.props.expanded) {
       this.forceUpdate();
     }
@@ -54,7 +58,7 @@ export default class SliderWrap extends React.Component {
       style.margin = '0 0 0 auto';
     }
     return (
-      <div className={styles.slider} style={style}>
+      <div className={styles.slider} style={style} ref={this.sliderRef}>
         <div className={styles.metrics} style={this.props.block ? { display: 'block' } : {}}>
           {this.props.children}
         </div>
diff --git a/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js b/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js
index 53b3572107..d1c52a02d2 100644
--- a/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js
+++ b/src/components/SlowQueriesFilter/SlowQueriesFilter.react.js
@@ -11,7 +11,6 @@ import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import PropTypes      from 'lib/PropTypes';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import styles         from 'components/SlowQueriesFilter/SlowQueriesFilter.scss';
 
 export default class SlowQueriesFilter extends React.Component {
@@ -21,10 +20,8 @@ export default class SlowQueriesFilter extends React.Component {
     this.state = {
       open: false
     }
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -38,7 +35,7 @@ export default class SlowQueriesFilter extends React.Component {
     let popover = null;
     let active = className || os || version;
     if (this.state.open) {
-      let position = Position.inDocument(this.node);
+      let position = Position.inDocument(this.wrapRef.current);
       let popoverStyle = [styles.popover];
       if (active) {
         popoverStyle.push(styles.active);
@@ -78,7 +75,7 @@ export default class SlowQueriesFilter extends React.Component {
       buttonStyle.push(styles.active);
     }
     return (
-      <div className={styles.wrap}>
+      <div className={styles.wrap} ref={this.wrapRef}>
         <div className={buttonStyle.join(' ')} onClick={() => this.setState({ open: true })}>
           <Icon name='filter-solid' width={14} height={14} />
           <span>Filter</span>

From 18e183127ee9125ea2af2793cf07979583b43f30 Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Wed, 8 Dec 2021 00:04:55 +0100
Subject: [PATCH 02/10] Another part of code refactored

---
 .../ExplorerActiveChartButton.react.js        | 11 ++++------
 .../ExplorerMenuButton.react.js               | 10 ++++-----
 .../MultiSelect/MultiSelect.react.js          | 22 +++++++++----------
 .../PushExperimentDropdown.react.js           |  2 +-
 4 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js
index e9609103f4..51930881be 100644
--- a/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js
+++ b/src/components/ExplorerActiveChartButton/ExplorerActiveChartButton.react.js
@@ -12,7 +12,6 @@ import Popover               from 'components/Popover/Popover.react';
 import Position              from 'lib/Position';
 import PropTypes             from 'lib/PropTypes';
 import React                 from 'react';
-import ReactDOM              from 'react-dom';
 import styles                from 'components/ExplorerActiveChartButton/ExplorerActiveChartButton.scss';
 import baseStyles            from 'stylesheets/base.scss';
 
@@ -26,10 +25,8 @@ export default class ExplorerActiveChartButton extends React.Component {
       active: true,
       align: Directions.LEFT
     }
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   handleCheckbox() {
@@ -64,10 +61,10 @@ export default class ExplorerActiveChartButton extends React.Component {
         <div
           className={[styles.rightArrow, baseStyles.verticalCenter].join(' ')}
           onClick={() => {
-            let position = Position.inDocument(this.node);
+            let position = Position.inDocument(this.wrapRef.current);
             let align = Directions.LEFT;
             if (position.x > 700) {
-              position.x += this.node.clientWidth;
+              position.x += this.wrapRef.current.clientWidth;
               align = Directions.RIGHT;
             }
             this.setState({
@@ -130,7 +127,7 @@ export default class ExplorerActiveChartButton extends React.Component {
     }
 
     return (
-      <div className={styles.wrap}>
+      <div className={styles.wrap} ref={this.wrapRef}>
         {content}
         {popover}
       </div>
diff --git a/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js b/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
index aa62fd2d3a..a1c84703b8 100644
--- a/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
+++ b/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
@@ -24,10 +24,8 @@ export default class ExplorerMenuButton extends React.Component {
       position: null,
       align: Directions.LEFT
     };
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   toggle() {
@@ -35,10 +33,10 @@ export default class ExplorerMenuButton extends React.Component {
       if (this.state.currentView) {
         return { currentView: null };
       }
-      let position = Position.inDocument(this.node);
+      let position = Position.inDocument(this.wrapRef.current);
       let align = Directions.LEFT;
       if (position.x > 700) {
-        position.x += this.node.clientWidth;
+        position.x += this.wrapRef.current.clientWidth;
         align = Directions.RIGHT;
       }
       return {
@@ -121,7 +119,7 @@ export default class ExplorerMenuButton extends React.Component {
     }
 
     return (
-      <div className={styles.wrap}>
+      <div className={styles.wrap} ref={this.wrapRef}>
         {content}
         {popover}
       </div>
diff --git a/src/components/MultiSelect/MultiSelect.react.js b/src/components/MultiSelect/MultiSelect.react.js
index 327b7d5303..2e3dcb1758 100644
--- a/src/components/MultiSelect/MultiSelect.react.js
+++ b/src/components/MultiSelect/MultiSelect.react.js
@@ -10,7 +10,6 @@ import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import PropTypes      from 'lib/PropTypes';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import stringList     from 'lib/stringList';
 import styles         from 'components/MultiSelect/MultiSelect.scss';
 import Chip           from 'components/Chip/Chip.react';
@@ -22,10 +21,12 @@ export default class MultiSelect extends React.Component {
       open: false,
       position: null
     }
-    this.popoverRef = React.createRef(null);
+    this.popoverRef = React.createRef();
+    this.dropdownRef = React.createRef();
     this.handleScroll = () => {
-      let newPosition = this.props.fixed ? Position.inWindow(this.node) : Position.inDocument(this.node);
-      newPosition.y += this.node.offsetHeight;
+      const node = this.dropdownRef.current;
+      let newPosition = this.props.fixed ? Position.inWindow(node) : Position.inDocument(node);
+      newPosition.y += node.offsetHeight;
       if(this.popoverRef.current){
         this.popoverRef.current.setPosition(newPosition);
       }
@@ -33,9 +34,7 @@ export default class MultiSelect extends React.Component {
   }
 
   componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
     window.addEventListener('scroll', this.handleScroll)
-   
   }
   componentWillUnmount(){
     window.removeEventListener('scroll', this.handleScroll)
@@ -47,8 +46,9 @@ export default class MultiSelect extends React.Component {
   }
 
   setPosition() {
-    let newPosition = this.props.fixed ? Position.inWindow(this.node) : Position.inDocument(this.node);
-    newPosition.y += this.node.offsetHeight; //Move dropdown down below field
+    const node = this.dropdownRef.current;
+    let newPosition = this.props.fixed ? Position.inWindow(node) : Position.inDocument(node);
+    newPosition.y += node.offsetHeight; //Move dropdown down below field
     //The forceUpdate call is necessary in case the size of the field changes size during the current render.
     this.setState({ position: newPosition }, () => this.forceUpdate());
   }
@@ -59,7 +59,7 @@ export default class MultiSelect extends React.Component {
   }
 
   close(e) {
-    if (!hasAncestor(e.target, this.node)) {
+    if (!hasAncestor(e.target, this.dropdownRef.current)) {
       //In the case where the user clicks on the node, toggle() will handle closing the dropdown.
       this.setState({open: false});
     }
@@ -78,7 +78,7 @@ export default class MultiSelect extends React.Component {
   render() {
     let popover = null;
     if (this.state.open) {
-      let width = this.node.clientWidth;
+      let width = this.dropdownRef.current.clientWidth;
       
       let classes = [styles.menu];
       if (this.props.dense){
@@ -147,7 +147,7 @@ export default class MultiSelect extends React.Component {
     }
 
     return (
-      <div style={dropdownStyle} className={dropDownClasses.join(' ')}>
+      <div style={dropdownStyle} className={dropDownClasses.join(' ')} ref={this.dropdownRef}>
         <div className={classes.join(' ')} onClick={this.toggle.bind(this)}>
          {content}
         </div>
diff --git a/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js b/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
index 0977d85bd4..ec4b14e9d9 100644
--- a/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
+++ b/src/components/PushExperimentDropdown/PushExperimentDropdown.react.js
@@ -47,7 +47,7 @@ export default class PushExperimentDropdown extends React.Component {
       </div>
     );
     if (this.state.open) {
-      let position = Position.inWindow(this.dropdownRef);
+      let position = Position.inWindow(this.dropdownRef.current);
       content = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
           <div style={widthStyle} className={[styles.menu, styles[color]].join(' ')}>

From f10613f43abdfd29600c93f606cc938e24854bc9 Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Wed, 8 Dec 2021 20:54:20 +0100
Subject: [PATCH 03/10] Next slice of code refactored to use ref API

---
 .../Autocomplete/Autocomplete.react.js        | 21 ++++++++++---------
 .../BrowserFilter/BrowserFilter.react.js      | 13 +++++-------
 .../BrowserMenu/BrowserMenu.react.js          | 12 ++++-------
 .../ChromeDatePicker.react.js                 | 11 ++++------
 .../ChromeDropdown/ChromeDropdown.react.js    | 13 +++++-------
 .../CreditCardInput/CreditCardInput.react.js  |  6 ++++--
 src/components/DatePicker/DatePicker.react.js | 12 ++++-------
 src/components/DateRange/DateRange.react.js   | 11 ++++------
 .../DateTimeEntry/DateTimeEntry.react.js      | 18 +++++++---------
 .../DateTimeInput/DateTimeInput.react.js      | 16 +++++++-------
 src/components/Dropdown/Dropdown.react.js     | 13 +++++-------
 .../ExplorerMenuButton.react.js               |  1 -
 12 files changed, 61 insertions(+), 86 deletions(-)

diff --git a/src/components/Autocomplete/Autocomplete.react.js b/src/components/Autocomplete/Autocomplete.react.js
index ef9cb666fc..937a526702 100644
--- a/src/components/Autocomplete/Autocomplete.react.js
+++ b/src/components/Autocomplete/Autocomplete.react.js
@@ -8,7 +8,6 @@
 import Position             from 'lib/Position';
 import PropTypes            from 'prop-types'
 import React, { Component } from 'react';
-import ReactDOM             from 'react-dom';
 import styles               from 'components/Autocomplete/Autocomplete.scss';
 import SuggestionsList      from 'components/SuggestionsList/SuggestionsList.react';
 
@@ -32,8 +31,9 @@ export default class Autocomplete extends Component {
     this.getPosition = this.getPosition.bind(this);
     this.recalculatePosition = this.recalculatePosition.bind(this);
 
-    this.inputRef = React.createRef(null);
-    this.dropdownRef = React.createRef(null);
+    this.inputRef = React.createRef();
+    this.dropdownRef = React.createRef();
+    this.fieldRef = React.createRef();
 
     this.handleScroll = () => {
       const pos = this.getPosition();
@@ -57,23 +57,24 @@ export default class Autocomplete extends Component {
 
   componentDidMount() {
     window.addEventListener('resize', this.handleResize);
-    this.node = ReactDOM.findDOMNode(this);
-    this.node.addEventListener('scroll', this.handleScroll);
+    this.fieldRef.current.addEventListener('scroll', this.handleScroll);
     this.recalculatePosition();
     this._ignoreBlur = false;
   }
 
   componentWillUnmount() {
-    this.node.removeEventListener('scroll', this.handleScroll);
+    this.fieldRef.current.removeEventListener('scroll', this.handleScroll);
     window.removeEventListener('resize', this.handleResize);
   }
 
   getPosition() {
+    const node = this.fieldRef.current;
+
     let newPosition = this.props.fixed
-      ? Position.inWindow(this.node)
-      : Position.inDocument(this.node);
+      ? Position.inWindow(node)
+      : Position.inDocument(node);
 
-    newPosition.y += this.node.offsetHeight;
+    newPosition.y += node.offsetHeight;
 
     return newPosition;
   }
@@ -321,7 +322,7 @@ export default class Autocomplete extends Component {
 
     return (
       <React.Fragment>
-        <div className={fieldClassName}>
+        <div className={fieldClassName} ref={this.fieldRef}>
           <input
             id={1}
             role={'combobox'}
diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js
index 0e90cbcedf..3d2299ecf4 100644
--- a/src/components/BrowserFilter/BrowserFilter.react.js
+++ b/src/components/BrowserFilter/BrowserFilter.react.js
@@ -13,7 +13,6 @@ import Icon          from 'components/Icon/Icon.react';
 import Popover       from 'components/Popover/Popover.react';
 import Position      from 'lib/Position';
 import React         from 'react';
-import ReactDOM      from 'react-dom';
 import styles        from 'components/BrowserFilter/BrowserFilter.scss';
 import { List, Map } from 'immutable';
 
@@ -29,10 +28,7 @@ export default class BrowserFilter extends React.Component {
       blacklistedFilters: Filters.BLACKLISTED_FILTERS.concat(props.blacklistedFilters)
     };
     this.toggle = this.toggle.bind(this);
-  }
-
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -86,9 +82,10 @@ export default class BrowserFilter extends React.Component {
   render() {
     let popover = null;
     let buttonStyle = [styles.entry];
+    const node = this.wrapRef.current;
 
     if (this.state.open) {
-      let position = Position.inDocument(this.node);
+      let position = Position.inDocument(node);
       let popoverStyle = [styles.popover];
       buttonStyle.push(styles.title);
 
@@ -102,7 +99,7 @@ export default class BrowserFilter extends React.Component {
       popover = (
         <Popover fixed={true} position={position} onExternalClick={this.toggle} contentId={POPOVER_CONTENT_ID}>
           <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)} id={POPOVER_CONTENT_ID}>
-            <div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
+            <div onClick={this.toggle} style={{ cursor: 'pointer', width: node.clientWidth, height: node.clientHeight }}></div>
             <div className={styles.body}>
               <Filter
                 className={this.props.className}
@@ -149,7 +146,7 @@ export default class BrowserFilter extends React.Component {
       buttonStyle.push(styles.disabled);
     }
     return (
-      <div className={styles.wrap}>
+      <div className={styles.wrap} ref={this.wrapRef}>
         <div className={buttonStyle.join(' ')} onClick={this.toggle}>
           <Icon name="filter-solid" width={14} height={14} />
           <span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>
diff --git a/src/components/BrowserMenu/BrowserMenu.react.js b/src/components/BrowserMenu/BrowserMenu.react.js
index 46479fff6b..5939920667 100644
--- a/src/components/BrowserMenu/BrowserMenu.react.js
+++ b/src/components/BrowserMenu/BrowserMenu.react.js
@@ -10,7 +10,6 @@ import Icon         from 'components/Icon/Icon.react';
 import Position     from 'lib/Position';
 import PropTypes    from 'lib/PropTypes';
 import React        from 'react';
-import ReactDOM     from 'react-dom';
 import styles       from 'components/BrowserMenu/BrowserMenu.scss';
 
 export default class BrowserMenu extends React.Component {
@@ -18,16 +17,13 @@ export default class BrowserMenu extends React.Component {
     super();
 
     this.state = { open: false };
-  }
-
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   render() {
     let menu = null;
     if (this.state.open) {
-      let position = Position.inDocument(this.node);
+      let position = Position.inDocument(this.wrapRef.current);
       let titleStyle = [styles.title];
       if (this.props.active) {
         titleStyle.push(styles.active);
@@ -39,7 +35,7 @@ export default class BrowserMenu extends React.Component {
               <Icon name={this.props.icon} width={14} height={14} />
               <span>{this.props.title}</span>
             </div>
-            <div className={styles.body} style={{ minWidth: this.node.clientWidth }}>
+            <div className={styles.body} style={{ minWidth: this.wrapRef.current.clientWidth }}>
               {React.Children.map(this.props.children, (child) => (
                 React.cloneElement(child, { ...child.props, onClick: () => {
                   this.setState({ open: false });
@@ -66,7 +62,7 @@ export default class BrowserMenu extends React.Component {
       };
     }
     return (
-      <div className={styles.wrap}>
+      <div className={styles.wrap} ref={this.wrapRef}>
         <div className={classes.join(' ')} onClick={onClick}>
           <Icon name={this.props.icon} width={14} height={14} />
           <span>{this.props.title}</span>
diff --git a/src/components/ChromeDatePicker/ChromeDatePicker.react.js b/src/components/ChromeDatePicker/ChromeDatePicker.react.js
index 0fd4ba795d..a607b2f4b1 100644
--- a/src/components/ChromeDatePicker/ChromeDatePicker.react.js
+++ b/src/components/ChromeDatePicker/ChromeDatePicker.react.js
@@ -15,7 +15,6 @@ import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import PropTypes      from 'lib/PropTypes';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import styles         from 'components/ChromeDatePicker/ChromeDatePicker.scss';
 
 export default class ChromeDatePicker extends React.Component {
@@ -26,10 +25,8 @@ export default class ChromeDatePicker extends React.Component {
       open: false,
       position: null,
     };
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef()
   }
 
   toggle() {
@@ -37,9 +34,9 @@ export default class ChromeDatePicker extends React.Component {
       if (this.state.open) {
         return { open: false };
       }
-      let pos = Position.inWindow(this.node);
+      let pos = Position.inWindow(this.wrapRef.current);
       if (this.props.align === Directions.RIGHT) {
-        pos.x += this.node.clientWidth;
+        pos.x += this.wrapRef.current.clientWidth;
       }
       return {
         open: true,
@@ -92,7 +89,7 @@ export default class ChromeDatePicker extends React.Component {
     }
 
     return (
-      <div className={styles.wrap} onClick={this.toggle.bind(this)}>
+      <div className={styles.wrap} onClick={this.toggle.bind(this)} ref={this.wrapRef}>
         {content}
         {popover}
       </div>
diff --git a/src/components/ChromeDropdown/ChromeDropdown.react.js b/src/components/ChromeDropdown/ChromeDropdown.react.js
index 07000eadd3..d83c8f411f 100644
--- a/src/components/ChromeDropdown/ChromeDropdown.react.js
+++ b/src/components/ChromeDropdown/ChromeDropdown.react.js
@@ -9,7 +9,6 @@ import Popover   from 'components/Popover/Popover.react';
 import PropTypes from 'lib/PropTypes';
 import Position  from 'lib/Position';
 import React     from 'react';
-import ReactDOM  from 'react-dom';
 import styles    from 'components/ChromeDropdown/ChromeDropdown.scss';
 
 export default class ChromeDropdown extends React.Component {
@@ -20,6 +19,8 @@ export default class ChromeDropdown extends React.Component {
       open: false,
       selected: false,
     };
+
+    this.dropdownRef = React.createRef();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -38,10 +39,6 @@ export default class ChromeDropdown extends React.Component {
     this.styles = this.props.styles || styles;
   }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
-  }
-
   select(value, e) {
     e.stopPropagation();
     this.setState({
@@ -72,8 +69,8 @@ export default class ChromeDropdown extends React.Component {
     );
 
     if (this.state.open) {
-      let position = Position.inWindow(this.node);
-      let measuredWidth = parseFloat(this.node.offsetWidth);
+      let position = Position.inWindow(this.dropdownRef.current);
+      let measuredWidth = parseFloat(this.dropdownRef.current.offsetWidth);
       widthStyle = { width: measuredWidth };
       content = (
         <Popover fixed={true} position={position} onExternalClick={() => this.setState({ open: false })}>
@@ -93,7 +90,7 @@ export default class ChromeDropdown extends React.Component {
     }
 
     return (
-      <div style={widthStyle} className={styles.dropdown}>
+      <div style={widthStyle} className={styles.dropdown} ref={this.dropdownRef}>
         {content}
       </div>
     );
diff --git a/src/components/CreditCardInput/CreditCardInput.react.js b/src/components/CreditCardInput/CreditCardInput.react.js
index 872f8f5f11..c9eeb524cb 100644
--- a/src/components/CreditCardInput/CreditCardInput.react.js
+++ b/src/components/CreditCardInput/CreditCardInput.react.js
@@ -7,7 +7,6 @@
  */
 import PropTypes from 'lib/PropTypes';
 import React     from 'react';
-import ReactDOM  from 'react-dom';
 import styles    from 'components/CreditCardInput/CreditCardInput.scss';
 
 const VALID_REGEX = /^[\d ]*$/;
@@ -18,10 +17,12 @@ class CreditCardInput extends React.Component {
     this.state = {
       cursorPosition: 0,
     };
+
+    this.inputRef = React.createRef();
   }
 
   componentDidUpdate() {
-    ReactDOM.findDOMNode(this).setSelectionRange(this.state.cursorPosition, this.state.cursorPosition);
+    this.inputRef.current.setSelectionRange(this.state.cursorPosition, this.state.cursorPosition);
   }
 
   render() {
@@ -33,6 +34,7 @@ class CreditCardInput extends React.Component {
     }
     return (
       <input
+        ref={this.inputRef}
         type='text'
         className={styles.input}
         value={value}
diff --git a/src/components/DatePicker/DatePicker.react.js b/src/components/DatePicker/DatePicker.react.js
index 6fe9aba736..6ae363adf9 100644
--- a/src/components/DatePicker/DatePicker.react.js
+++ b/src/components/DatePicker/DatePicker.react.js
@@ -11,7 +11,6 @@ import { MONTHS }     from 'lib/DateUtils';
 import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import SliderWrap     from 'components/SliderWrap/SliderWrap.react';
 import styles         from 'components/DatePicker/DatePicker.scss';
 
@@ -22,10 +21,7 @@ export default class DatePicker extends React.Component {
       open: false,
       position: null
     }
-  }
-
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.inputRef = React.createRef()
   }
 
   toggle() {
@@ -35,7 +31,7 @@ export default class DatePicker extends React.Component {
       }
       return {
         open: true,
-        position: Position.inDocument(this.node)
+        position: Position.inDocument(this.inputRef.current)
       };
     });
   }
@@ -49,7 +45,7 @@ export default class DatePicker extends React.Component {
   render() {
     let popover = null;
     if (this.state.open) {
-      let width = this.node.clientWidth;
+      let width = this.inputRef.current.clientWidth;
       popover = (
         <Popover position={this.state.position} onExternalClick={this.close.bind(this)}>
           <SliderWrap direction={Directions.DOWN} expanded={true}>
@@ -75,7 +71,7 @@ export default class DatePicker extends React.Component {
     }
     
     return (
-      <div className={styles.input} onClick={this.toggle.bind(this)}>
+      <div className={styles.input} onClick={this.toggle.bind(this)} ref={this.inputRef}>
         {content}
         {popover}
       </div>
diff --git a/src/components/DateRange/DateRange.react.js b/src/components/DateRange/DateRange.react.js
index 8bbacebaa7..555b7eb6c8 100644
--- a/src/components/DateRange/DateRange.react.js
+++ b/src/components/DateRange/DateRange.react.js
@@ -17,7 +17,6 @@ import Popover                          from 'components/Popover/Popover.react';
 import Position                         from 'lib/Position';
 import PropTypes                        from 'lib/PropTypes';
 import React                            from 'react';
-import ReactDOM                         from 'react-dom';
 import styles                           from 'components/DateRange/DateRange.scss';
 
 export default class DateRange extends React.Component {
@@ -32,10 +31,8 @@ export default class DateRange extends React.Component {
       start: val.start || monthsFrom(new Date(), -1),
       end: val.end || new Date()
     };
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.wrapRef = React.createRef();
   }
 
   toggle() {
@@ -43,9 +40,9 @@ export default class DateRange extends React.Component {
       if (this.state.open) {
         return { open: false };
       }
-      let pos = Position.inWindow(this.node);
+      let pos = Position.inWindow(this.wrapRef.current);
       if (this.props.align === Directions.RIGHT) {
-        pos.x += this.node.clientWidth;
+        pos.x += this.wrapRef.current.clientWidth;
       }
       return {
         open: true,
@@ -125,7 +122,7 @@ export default class DateRange extends React.Component {
     }
 
     return (
-      <div className={styles.wrap} onClick={this.toggle.bind(this)}>
+      <div className={styles.wrap} onClick={this.toggle.bind(this)} ref={this.wrapRef}>
         {content}
         {popover}
       </div>
diff --git a/src/components/DateTimeEntry/DateTimeEntry.react.js b/src/components/DateTimeEntry/DateTimeEntry.react.js
index d1eb69c093..89ae444c30 100644
--- a/src/components/DateTimeEntry/DateTimeEntry.react.js
+++ b/src/components/DateTimeEntry/DateTimeEntry.react.js
@@ -9,7 +9,6 @@ import DateTimePicker from 'components/DateTimePicker/DateTimePicker.react';
 import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 
 export default class DateTimeEntry extends React.Component {
   constructor(props) {
@@ -20,6 +19,8 @@ export default class DateTimeEntry extends React.Component {
       position: null,
       value: props.value.toISOString ? props.value.toISOString() : props.value
     }
+
+    this.rootRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -28,18 +29,15 @@ export default class DateTimeEntry extends React.Component {
     });
   }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
-  }
-
   toggle() {
     this.setState(() => {
       if (this.state.open) {
         return { open: false };
       }
-      let pos = Position.inDocument(this.node);
-      pos.y += this.node.clientHeight;
-      let height = 230 + this.node.clientWidth * 0.14;
+      let node = this.rootRef.current;
+      let pos = Position.inDocument(node);
+      pos.y += node.clientHeight;
+      let height = 230 + node.clientWidth * 0.14;
       if (window.innerHeight - pos.y - height < 40) {
         pos.y = window.innerHeight - height - 40;
       }
@@ -90,7 +88,7 @@ export default class DateTimeEntry extends React.Component {
         <Popover fixed={true} position={this.state.position} onExternalClick={this.close.bind(this)}  parentContentId={this.props.parentContentId}>
           <DateTimePicker
             value={this.props.value}
-            width={Math.max(this.node.clientWidth, 240)}
+            width={Math.max(this.rootRef.current.clientWidth, 240)}
             onChange={this.props.onChange}
             close={() => this.setState({ open: false })} />
         </Popover>
@@ -98,7 +96,7 @@ export default class DateTimeEntry extends React.Component {
     }
     
     return (
-      <div className={this.props.className} onClick={this.toggle.bind(this)}>
+      <div className={this.props.className} onClick={this.toggle.bind(this)} ref={this.rootRef}>
         <input
           type='text'
           value={this.state.value}
diff --git a/src/components/DateTimeInput/DateTimeInput.react.js b/src/components/DateTimeInput/DateTimeInput.react.js
index 7710e6719a..5c66e9c177 100644
--- a/src/components/DateTimeInput/DateTimeInput.react.js
+++ b/src/components/DateTimeInput/DateTimeInput.react.js
@@ -10,7 +10,6 @@ import { MONTHS, getDateMethod }     from 'lib/DateUtils';
 import Popover                       from 'components/Popover/Popover.react';
 import Position                      from 'lib/Position';
 import React                         from 'react';
-import ReactDOM                      from 'react-dom';
 import styles                        from 'components/DateTimeInput/DateTimeInput.scss';
 
 export default class DateTimeInput extends React.Component {
@@ -21,10 +20,8 @@ export default class DateTimeInput extends React.Component {
       open: false,
       position: null,
     }
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.inputRef = React.createRef();
   }
 
   toggle() {
@@ -32,10 +29,11 @@ export default class DateTimeInput extends React.Component {
       if (this.state.open) {
         return { open: false };
       }
-      let pos = Position.inDocument(this.node);
-      let height = 230 + this.node.clientWidth * 0.14;
+      let node = this.inputRef.current;
+      let pos = Position.inDocument(node);
+      let height = 230 + node.clientWidth * 0.14;
       if (this.props.fixed) {
-        pos = Position.inWindow(this.node);
+        pos = Position.inWindow(node);
         if (window.innerHeight - pos.y - height < 40) {
           pos.y = window.innerHeight - height - 40;
         }
@@ -65,7 +63,7 @@ export default class DateTimeInput extends React.Component {
           <DateTimePicker
             local={this.props.local}
             value={this.props.value}
-            width={this.node.clientWidth}
+            width={this.inputRef.current.clientWidth}
             onChange={this.props.onChange}
             close={() => this.setState({ open: false })} />
         </Popover>
@@ -89,7 +87,7 @@ export default class DateTimeInput extends React.Component {
     }
     
     return (
-      <div className={styles.input} onClick={this.props.disabled ? null : this.toggle.bind(this)}>
+      <div className={styles.input} onClick={this.props.disabled ? null : this.toggle.bind(this)} ref={this.inputRef}>
         {content}
         {popover}
       </div>
diff --git a/src/components/Dropdown/Dropdown.react.js b/src/components/Dropdown/Dropdown.react.js
index f4aef51009..3f444767f9 100644
--- a/src/components/Dropdown/Dropdown.react.js
+++ b/src/components/Dropdown/Dropdown.react.js
@@ -10,7 +10,6 @@ import Popover        from 'components/Popover/Popover.react';
 import Position       from 'lib/Position';
 import PropTypes      from 'lib/PropTypes';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import SliderWrap     from 'components/SliderWrap/SliderWrap.react';
 import styles         from 'components/Dropdown/Dropdown.scss';
 
@@ -21,10 +20,8 @@ export default class Dropdown extends React.Component {
       open: false,
       position: null
     }
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.dropdownRef = React.createRef();
   }
 
   toggle() {
@@ -32,9 +29,9 @@ export default class Dropdown extends React.Component {
       if (this.state.open) {
         return { open: false };
       }
-      let pos = Position.inDocument(this.node);
+      let pos = Position.inDocument(this.dropdownRef.current);
       if (this.props.fixed) {
-        pos = Position.inWindow(this.node);
+        pos = Position.inWindow(this.dropdownRef.current);
       }
       return {
         open: true,
@@ -63,7 +60,7 @@ export default class Dropdown extends React.Component {
   render() {
     let popover = null;
     if (this.state.open && !this.props.disabled) {
-      let width = this.node.clientWidth;
+      let width = this.dropdownRef.current.clientWidth;
       let popoverChildren = (
         <SliderWrap direction={Directions.DOWN} expanded={true}>
           <div style={{ width }} className={styles.menu}>
@@ -103,7 +100,7 @@ export default class Dropdown extends React.Component {
       dropdownClasses.push(styles.disabled);
     }
     return (
-      <div style={dropdownStyle} className={dropdownClasses.join(' ')}>
+      <div style={dropdownStyle} className={dropdownClasses.join(' ')} ref={this.dropdownRef}>
         <div className={[styles.current, this.props.hideArrow ? styles.hideArrow : ''].join(' ')} onClick={this.toggle.bind(this)}>
           {content}
         </div>
diff --git a/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js b/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
index a1c84703b8..254bb5bdb2 100644
--- a/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
+++ b/src/components/ExplorerMenuButton/ExplorerMenuButton.react.js
@@ -12,7 +12,6 @@ import Popover               from 'components/Popover/Popover.react';
 import Position              from 'lib/Position';
 import PropTypes             from 'lib/PropTypes';
 import React                 from 'react';
-import ReactDOM              from 'react-dom';
 import styles                from 'components/ExplorerMenuButton/ExplorerMenuButton.scss';
 
 export default class ExplorerMenuButton extends React.Component {

From 02de46ee0374913befbb2dd602fa246414c75f70 Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Wed, 8 Dec 2021 20:54:34 +0100
Subject: [PATCH 04/10] No need to pass null as it is a default value

---
 src/components/PermissionsDialog/PermissionsDialog.react.js | 6 +++---
 .../ProtectedFieldsDialog/ProtectedFieldsDialog.react.js    | 6 +++---
 src/components/SuggestionsList/SuggestionsList.react.js     | 2 +-
 src/components/TrackVisibility/TrackVisibility.example.js   | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/PermissionsDialog/PermissionsDialog.react.js b/src/components/PermissionsDialog/PermissionsDialog.react.js
index 5bca1710bd..b4d749494f 100644
--- a/src/components/PermissionsDialog/PermissionsDialog.react.js
+++ b/src/components/PermissionsDialog/PermissionsDialog.react.js
@@ -522,9 +522,9 @@ export default class PermissionsDialog extends React.Component {
 
     const { permissions, advanced, columns } = props;
 
-    this.refEntry = React.createRef(null);
-    this.refTable = React.createRef(null);
-    this.refScrollIndicator = React.createRef(null);
+    this.refEntry = React.createRef();
+    this.refTable = React.createRef();
+    this.refScrollIndicator = React.createRef();
 
     const callback = ([entry]) => {
       const ratio = entry.intersectionRatio;
diff --git a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
index 8146b7df37..b0f062b216 100644
--- a/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
+++ b/src/components/ProtectedFieldsDialog/ProtectedFieldsDialog.react.js
@@ -30,9 +30,9 @@ export default class ProtectedFieldsDialog extends React.Component {
 
     let keys = Object.keys(protectedFields || {});
 
-    this.refEntry = React.createRef(null);
-    this.refTable = React.createRef(null);
-    this.refScrollHint = React.createRef(null);
+    this.refEntry = React.createRef();
+    this.refTable = React.createRef();
+    this.refScrollHint = React.createRef();
 
     // Intersection observer is used to avoid ugly effe t
     // when suggestion are shown whil input field is scrolled out oof viewpoort
diff --git a/src/components/SuggestionsList/SuggestionsList.react.js b/src/components/SuggestionsList/SuggestionsList.react.js
index 448236ddbb..3e82163d9b 100644
--- a/src/components/SuggestionsList/SuggestionsList.react.js
+++ b/src/components/SuggestionsList/SuggestionsList.react.js
@@ -19,7 +19,7 @@ export default class Suggestion extends React.Component {
       position: null
     };
 
-    this.popoverRef = React.createRef(null);
+    this.popoverRef = React.createRef();
 
     this.handleScroll = () => {
       let newPosition = this.props.fixed
diff --git a/src/components/TrackVisibility/TrackVisibility.example.js b/src/components/TrackVisibility/TrackVisibility.example.js
index 7cea63daf6..a1ea0661d4 100644
--- a/src/components/TrackVisibility/TrackVisibility.example.js
+++ b/src/components/TrackVisibility/TrackVisibility.example.js
@@ -14,7 +14,7 @@ class DemoTrackVisibility extends React.Component {
   constructor() {
     super();
 
-    this.ref = React.createRef(null);
+    this.ref = React.createRef();
 
     ///[0.00...1.00]
     const thresholds = Array(101)

From 12dc4e6c099d2aade0fb5a00e12c8a2e1652d0a0 Mon Sep 17 00:00:00 2001
From: Damian Stasik <visualfanatic@users.noreply.github.com>
Date: Wed, 8 Dec 2021 22:58:24 +0100
Subject: [PATCH 05/10] Last part of findDOMNode refactors

---
 .../BrowserFilter/FilterRow.react.js          |  4 +---
 .../ColumnsConfiguration.react.js             | 23 ++++++++++---------
 .../ExplorerQueryComposer.react.js            |  5 ++--
 src/components/Filter/Filter.react.js         |  2 +-
 .../InstallationCondition.react.js            |  3 +--
 src/components/TextInput/TextInput.react.js   | 18 ++++++++-------
 src/lib/withForwardedRef.js                   | 12 ++++++++++
 7 files changed, 39 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/withForwardedRef.js

diff --git a/src/components/BrowserFilter/FilterRow.react.js b/src/components/BrowserFilter/FilterRow.react.js
index de9416ded6..a6484813a3 100644
--- a/src/components/BrowserFilter/FilterRow.react.js
+++ b/src/components/BrowserFilter/FilterRow.react.js
@@ -12,7 +12,6 @@ import Icon            from 'components/Icon/Icon.react';
 import Parse           from 'parse';
 import PropTypes       from 'lib/PropTypes';
 import React           from 'react';
-import ReactDOM        from 'react-dom';
 import styles          from 'components/BrowserFilter/BrowserFilter.scss';
 import validateNumeric from 'lib/validateNumeric';
 
@@ -23,7 +22,7 @@ for (let c in Constraints) {
 
 let setFocus = (input) => {
   if (input !== null) {
-    ReactDOM.findDOMNode(input).focus();
+    input.focus();
   }
 }
 
@@ -70,7 +69,6 @@ function compareValue(info, value, onChangeCompareTo, active, parentContentId) {
           className={styles.date}
           value={Parse._decode('date', value)}
           onChange={(value) => onChangeCompareTo(Parse._encode(value))}
-          ref={setFocus} 
           parentContentId={parentContentId} />
       );
   }
diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
index f190d098fa..d830bc3b92 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { DndProvider } from 'react-dnd'
 import HTML5Backend from 'react-dnd-html5-backend'
-import ReactDOM from 'react-dom';
 
 import Button from 'components/Button/Button.react';
 import ColumnConfigurationItem from 'components/ColumnsConfiguration/ColumnConfigurationItem.react';
@@ -19,10 +18,8 @@ export default class ColumnsConfiguration extends React.Component {
     this.state = {
       open: false
     };
-  }
 
-  componentDidMount() {
-    this.node = ReactDOM.findDOMNode(this);
+    this.titleRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -56,12 +53,16 @@ export default class ColumnsConfiguration extends React.Component {
 
   render() {
     const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
-    let [ title, entry ] = [styles.title, styles.entry ].map(className => (
-      <div className={className} onClick={this.toggle.bind(this)}>
-        <Icon name='manage-columns' width={14} height={14} />
-        <span>Manage Columns</span>
-      </div>
-    ));
+    const title = <div className={styles.title} onClick={this.toggle.bind(this)} ref={this.titleRef}>
+      <Icon name='manage-columns' width={14} height={14} />
+      <span>Manage Columns</span>
+    </div>
+
+    let entry = <div className={styles.entry} onClick={this.toggle.bind(this)}>
+      <Icon name='manage-columns' width={14} height={14} />
+      <span>Manage Columns</span>
+    </div>
+
     if (disabled) {
       entry = <div className={styles.entry + ' ' + styles.disabled} onClick={null}>
         <Icon name='manage-columns' width={14} height={14} />
@@ -72,7 +73,7 @@ export default class ColumnsConfiguration extends React.Component {
     let popover = null;
     if (this.state.open) {
       popover = (
-        <Popover fixed={true} position={Position.inDocument(this.node)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
+        <Popover fixed={true} position={Position.inDocument(this.titleRef.current)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
           <div className={styles.popover} id={POPOVER_CONTENT_ID}>
             {title}
             <div className={styles.body}>
diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
index b686fb44de..e0646a49db 100644
--- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
+++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
@@ -15,7 +15,6 @@ import {
 }                       from 'components/ExplorerQueryComposer/ExplorerFilter';
 import PropTypes      from 'lib/PropTypes';
 import React          from 'react';
-import ReactDOM       from 'react-dom';
 import styles         from 'components/ExplorerQueryComposer/ExplorerQueryComposer.scss';
 
 const TABLE_SOURCES_LABEL = ['API Event', 'Custom Event'];
@@ -104,7 +103,7 @@ for (let c in Constraints) {
 
 let setFocus = (input) => {
   if (input !== null) {
-    ReactDOM.findDOMNode(input).focus();
+    input.focus();
   }
 };
 
@@ -122,7 +121,7 @@ let fieldView = (type, value, onChangeValue) => {
     case 'Number':
       return <input type='number' className={styles.formInput} style={fieldStyle} value={value} onChange={(e) => onChangeValue(validateNumeric(e.target.value) ? e.target.value : (value || ''))} />;
     case 'Date':
-      return <div style={fieldStyle}><DateTimeEntry fixed={true} className={styles.formInput} value={value || new Date()} onChange={onChangeValue} ref={setFocus}/></div>;
+      return <div style={fieldStyle}><DateTimeEntry fixed={true} className={styles.formInput} value={value || new Date()} onChange={onChangeValue} /></div>;
     default:
       throw new Error('Incompatible type ' + type + ' used to render fieldView.');
   }
diff --git a/src/components/Filter/Filter.react.js b/src/components/Filter/Filter.react.js
index 48db5f6fbb..bbbc046834 100644
--- a/src/components/Filter/Filter.react.js
+++ b/src/components/Filter/Filter.react.js
@@ -61,7 +61,7 @@ let Filter = ({ schema, filters, renderRow, onChange, blacklist, className }) =>
         }
 
         // Get the column preference of the current class.
-        const currentColumnPreference = currentApp.columnPreference[className];
+        const currentColumnPreference = currentApp.columnPreference && currentApp.columnPreference[className];
 
         // Check if the preference exists.
         if (currentColumnPreference) {
diff --git a/src/components/PushAudienceDialog/InstallationCondition.react.js b/src/components/PushAudienceDialog/InstallationCondition.react.js
index 617aff8539..eb9e61a3da 100644
--- a/src/components/PushAudienceDialog/InstallationCondition.react.js
+++ b/src/components/PushAudienceDialog/InstallationCondition.react.js
@@ -14,7 +14,6 @@ import { List }        from 'immutable';
 import Option          from 'components/Dropdown/Option.react';
 import Parse           from 'parse';
 import React           from 'react';
-import ReactDOM        from 'react-dom';
 import styles          from 'components/PushAudienceDialog/InstallationCondition.scss';
 import TextInput       from 'components/TextInput/TextInput.react';
 import validateNumeric from 'lib/validateNumeric';
@@ -26,7 +25,7 @@ for (let c in Constraints) {
 
 let setFocus = (input) => {
   if (input !== null) {
-    ReactDOM.findDOMNode(input).focus();
+    input.focus();
   }
 }
 
diff --git a/src/components/TextInput/TextInput.react.js b/src/components/TextInput/TextInput.react.js
index 8101cb1875..3ba85e59af 100644
--- a/src/components/TextInput/TextInput.react.js
+++ b/src/components/TextInput/TextInput.react.js
@@ -8,17 +8,17 @@
 import PropTypes from 'lib/PropTypes';
 import React from 'react';
 import styles from 'components/TextInput/TextInput.scss';
+import { withForwardedRef } from 'lib/withForwardedRef';
 
-export default class TextInput extends React.Component {
+class TextInput extends React.Component {
   componentWillReceiveProps(props) {
     if (props.multiline !== this.props.multiline) {
-      const previousInput = this.refs.input;
+      const node = props.forwardedRef.current;
       // wait a little while for component to re-render
       setTimeout(function() {
-        const newInput = previousInput ? this.refs.textarea : this.refs.input;
-        newInput.focus();
-        newInput.value = '';
-        newInput.value = props.value;
+        node.focus();
+        node.value = '';
+        node.value = props.value;
       }.bind(this), 1);
     }
   }
@@ -44,7 +44,7 @@ export default class TextInput extends React.Component {
     if (this.props.multiline) {
       return (
         <textarea
-          ref="textarea"
+          ref={this.props.forwardedRef}
           id={this.props.id}
           disabled={!!this.props.disabled}
           className={classes.join(' ')}
@@ -58,7 +58,7 @@ export default class TextInput extends React.Component {
     }
     return (
       <input
-        ref="input"
+        ref={this.props.forwardedRef}
         id={this.props.id}
         type={this.props.hidden ? 'password' : 'text'}
         disabled={!!this.props.disabled}
@@ -101,3 +101,5 @@ TextInput.propTypes = {
     'The height of the field. Can be a string containing any CSS unit, or a number of pixels. Default is 80px.'
   ),
 };
+
+export default withForwardedRef(TextInput);
diff --git a/src/lib/withForwardedRef.js b/src/lib/withForwardedRef.js
new file mode 100644
index 0000000000..27615efe37
--- /dev/null
+++ b/src/lib/withForwardedRef.js
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export function withForwardedRef(Component) {
+  function render(props, ref) {
+    return <Component {...props} forwardedRef={ref} />;
+  }
+
+  const name = Component.displayName || Component.name;
+  render.displayName = `withForwardedRef(${name})`;
+
+  return React.forwardRef(render);
+}

From de35edac0dec605e6d6e91f8fc8e61ef778da89e Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Thu, 29 Sep 2022 21:24:20 +0200
Subject: [PATCH 06/10] Remove unused code

---
 .../SuggestionsList/SuggestionsList.react.js          | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/SuggestionsList/SuggestionsList.react.js b/src/components/SuggestionsList/SuggestionsList.react.js
index 3e82163d9b..6b0268e404 100644
--- a/src/components/SuggestionsList/SuggestionsList.react.js
+++ b/src/components/SuggestionsList/SuggestionsList.react.js
@@ -8,7 +8,6 @@
 import Popover  from 'components/Popover/Popover.react';
 import React    from 'react';
 import styles   from 'components/SuggestionsList/SuggestionsList.scss';
-import Position from 'lib/Position';
 
 export default class Suggestion extends React.Component {
   constructor() {
@@ -20,16 +19,6 @@ export default class Suggestion extends React.Component {
     };
 
     this.popoverRef = React.createRef();
-
-    this.handleScroll = () => {
-      let newPosition = this.props.fixed
-        ? Position.inWindow(this.node)
-        : Position.inDocument(this.node);
-      newPosition.y += this.node.offsetHeight;
-      if (this.popoverRef.current) {
-        this.popoverRef.current.setPosition(newPosition);
-      }
-    };
   }
 
   toggle() {

From 1b2de1682877a5f7ad7da008d82cbef5b8689265 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Thu, 29 Sep 2022 21:29:34 +0200
Subject: [PATCH 07/10] Simplify SliderWrap ref

---
 src/components/SliderWrap/SliderWrap.react.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/SliderWrap/SliderWrap.react.js b/src/components/SliderWrap/SliderWrap.react.js
index 747c370c51..8fd7886e67 100644
--- a/src/components/SliderWrap/SliderWrap.react.js
+++ b/src/components/SliderWrap/SliderWrap.react.js
@@ -13,11 +13,10 @@ export default class SliderWrap extends React.Component {
   constructor() {
     super();
 
-    this.sliderRef = React.createRef();
+    this.metricsRef = React.createRef();
   }
 
   componentDidMount() {
-    this.metrics = this.sliderRef.current.children[0];
     if (this.props.expanded) {
       this.forceUpdate();
     }
@@ -39,27 +38,28 @@ export default class SliderWrap extends React.Component {
   render() {
     let style = {};
     let metric = this._getMetric();
-    if (!this.props.expanded || !this.metrics) {
+    let node = this.metricsRef.current;
+    if (!this.props.expanded || !node) {
       if (metric === 'width' || metric === 'both') {
         style.width = '0px';
       }
       if (metric === 'height' || metric === 'both') {
         style.height = '0px';
       }
-    } else if (this.props.expanded && this.metrics) {
+    } else if (this.props.expanded && node) {
       if (metric === 'width' || metric === 'both') {
-        style.width = this.metrics.clientWidth + 'px';
+        style.width = node.clientWidth + 'px';
       }
       if (metric === 'height' || metric === 'both') {
-        style.height = this.metrics.clientHeight + 'px';
+        style.height = node.clientHeight + 'px';
       }
     }
     if (this.props.direction === Directions.LEFT) {
       style.margin = '0 0 0 auto';
     }
     return (
-      <div className={styles.slider} style={style} ref={this.sliderRef}>
-        <div className={styles.metrics} style={this.props.block ? { display: 'block' } : {}}>
+      <div className={styles.slider} style={style}>
+        <div className={styles.metrics} style={this.props.block ? { display: 'block' } : {}} ref={this.metricsRef}>
           {this.props.children}
         </div>
       </div>

From ba79e760aac63cca82cb6697fb698133d1af6465 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Thu, 29 Sep 2022 21:56:35 +0200
Subject: [PATCH 08/10] Allow DateTimeEntry to be focused

---
 .../DateTimeEntry/DateTimeEntry.react.js      | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/src/components/DateTimeEntry/DateTimeEntry.react.js b/src/components/DateTimeEntry/DateTimeEntry.react.js
index 89ae444c30..2da49d5f62 100644
--- a/src/components/DateTimeEntry/DateTimeEntry.react.js
+++ b/src/components/DateTimeEntry/DateTimeEntry.react.js
@@ -21,6 +21,7 @@ export default class DateTimeEntry extends React.Component {
     }
 
     this.rootRef = React.createRef();
+    this.inputRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -30,21 +31,25 @@ export default class DateTimeEntry extends React.Component {
   }
 
   toggle() {
-    this.setState(() => {
-      if (this.state.open) {
-        return { open: false };
-      }
-      let node = this.rootRef.current;
-      let pos = Position.inDocument(node);
-      pos.y += node.clientHeight;
-      let height = 230 + node.clientWidth * 0.14;
-      if (window.innerHeight - pos.y - height < 40) {
-        pos.y = window.innerHeight - height - 40;
-      }
-      return {
-        open: true,
-        position: pos
-      };
+    if (this.state.open) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    let node = this.rootRef.current;
+    let pos = Position.inDocument(node);
+    pos.y += node.clientHeight;
+    let height = 230 + node.clientWidth * 0.14;
+    if (window.innerHeight - pos.y - height < 40) {
+      pos.y = window.innerHeight - height - 40;
+    }
+
+    this.setState({
+      open: true,
+      position: pos
     });
   }
 
@@ -81,6 +86,10 @@ export default class DateTimeEntry extends React.Component {
     }
   }
 
+  focus() {
+    this.open();
+  }
+
   render() {
     let popover = null;
     if (this.state.open) {
@@ -101,7 +110,8 @@ export default class DateTimeEntry extends React.Component {
           type='text'
           value={this.state.value}
           onChange={this.inputDate.bind(this)}
-          onBlur={this.commitDate.bind(this)} />
+          onBlur={this.commitDate.bind(this)}
+          ref={this.inputRef} />
         {popover}
       </div>
     );

From 1141b2aaeaed559641e014790b4e8a7365f1510d Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Thu, 29 Sep 2022 22:00:49 +0200
Subject: [PATCH 09/10] Restore ref now that DateTimeEntry can be focused
 properly

---
 .../ExplorerQueryComposer/ExplorerQueryComposer.react.js        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
index e0646a49db..046ae0f232 100644
--- a/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
+++ b/src/components/ExplorerQueryComposer/ExplorerQueryComposer.react.js
@@ -121,7 +121,7 @@ let fieldView = (type, value, onChangeValue) => {
     case 'Number':
       return <input type='number' className={styles.formInput} style={fieldStyle} value={value} onChange={(e) => onChangeValue(validateNumeric(e.target.value) ? e.target.value : (value || ''))} />;
     case 'Date':
-      return <div style={fieldStyle}><DateTimeEntry fixed={true} className={styles.formInput} value={value || new Date()} onChange={onChangeValue} /></div>;
+      return <div style={fieldStyle}><DateTimeEntry fixed={true} className={styles.formInput} value={value || new Date()} onChange={onChangeValue} ref={setFocus}/></div>;
     default:
       throw new Error('Incompatible type ' + type + ' used to render fieldView.');
   }

From 8876254c5a653e9c119b04b56ff475d53a714882 Mon Sep 17 00:00:00 2001
From: Damian Stasik <920747+damianstasik@users.noreply.github.com>
Date: Thu, 29 Sep 2022 22:42:12 +0200
Subject: [PATCH 10/10] Put ref on correct element in ColumnsConfiguration

---
 .../ColumnsConfiguration/ColumnsConfiguration.react.js    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
index 71a59825df..fd7f88e5d4 100644
--- a/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
+++ b/src/components/ColumnsConfiguration/ColumnsConfiguration.react.js
@@ -19,7 +19,7 @@ export default class ColumnsConfiguration extends React.Component {
       open: false
     };
 
-    this.titleRef = React.createRef();
+    this.entryRef = React.createRef();
   }
 
   componentWillReceiveProps(props) {
@@ -70,12 +70,12 @@ export default class ColumnsConfiguration extends React.Component {
 
   render() {
     const { handleColumnDragDrop, handleColumnsOrder, order, disabled } = this.props;
-    const title = <div className={styles.title} onClick={this.toggle.bind(this)} ref={this.titleRef}>
+    const title = <div className={styles.title} onClick={this.toggle.bind(this)}>
       <Icon name='manage-columns' width={14} height={14} />
       <span>Manage Columns</span>
     </div>
 
-    let entry = <div className={styles.entry} onClick={this.toggle.bind(this)}>
+    let entry = <div className={styles.entry} onClick={this.toggle.bind(this)} ref={this.entryRef}>
       <Icon name='manage-columns' width={14} height={14} />
       <span>Manage Columns</span>
     </div>
@@ -90,7 +90,7 @@ export default class ColumnsConfiguration extends React.Component {
     let popover = null;
     if (this.state.open) {
       popover = (
-        <Popover fixed={true} position={Position.inDocument(this.titleRef.current)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
+        <Popover fixed={true} position={Position.inDocument(this.entryRef.current)} onExternalClick={this.toggle.bind(this)} contentId={POPOVER_CONTENT_ID}>
           <div className={styles.popover} id={POPOVER_CONTENT_ID}>
             {title}
             <div className={styles.body}>