Enable ESLint find-dom-node rule and remove last usages of findDOMNode

5 files changed, 17 insertions, 16 deletions

diff --git a/gui/.eslintrc.js b/gui/.eslintrc.js
index 3e12630d7b..66948d120e 100644
--- a/gui/.eslintrc.js
+++ b/gui/.eslintrc.js
@@ -96,6 +96,5 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/ban-ts-comment': 'off',
-    'react/no-find-dom-node': 'off',
   },
 };
diff --git a/gui/src/renderer/components/LocationList.tsx b/gui/src/renderer/components/LocationList.tsx
index bc7e2fa4ed..2f2b440dfc 100644
--- a/gui/src/renderer/components/LocationList.tsx
+++ b/gui/src/renderer/components/LocationList.tsx
@@ -196,7 +196,7 @@ export function SpecialLocations<T>(props: ISpecialLocationsProps<T>) {
 
           return React.cloneElement(child, {
             ...child.props,
-            ref: isSelected ? props.selectedElementRef : undefined,
+            forwardedRef: isSelected ? props.selectedElementRef : undefined,
             onSelect: props.onSelect,
             isSelected,
           });
@@ -227,12 +227,16 @@ interface ISpecialLocationProps<T> {
   value: T;
   isSelected?: boolean;
   onSelect?: (value: T) => void;
+  forwardedRef?: React.Ref<HTMLButtonElement>;
 }
 
 export class SpecialLocation<T> extends React.Component<ISpecialLocationProps<T>> {
   public render() {
     return (
-      <StyledSpecialLocationCellButton selected={this.props.isSelected} onClick={this.onSelect}>
+      <StyledSpecialLocationCellButton
+        ref={this.props.forwardedRef}
+        selected={this.props.isSelected}
+        onClick={this.onSelect}>
         <StyledSpecialLocationIcon
           source={this.props.isSelected ? 'icon-tick' : this.props.icon}
           tintColor={colors.white}
diff --git a/gui/src/renderer/components/SelectLanguage.tsx b/gui/src/renderer/components/SelectLanguage.tsx
index dd29acf874..d21e6f0918 100644
--- a/gui/src/renderer/components/SelectLanguage.tsx
+++ b/gui/src/renderer/components/SelectLanguage.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
@@ -14,7 +13,7 @@ import {
   NavigationScrollbars,
   TitleBarItem,
 } from './NavigationBar';
-import Selector, { ISelectorItem, SelectorCell } from './Selector';
+import Selector, { ISelectorItem } from './Selector';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 
 interface IProps {
@@ -42,7 +41,7 @@ const StyledSelector = (styled(Selector)({
 
 export default class SelectLanguage extends React.Component<IProps, IState> {
   private scrollView = React.createRef<CustomScrollbars>();
-  private selectedCellRef = React.createRef<SelectorCell<string>>();
+  private selectedCellRef = React.createRef<HTMLButtonElement>();
 
   constructor(props: IProps) {
     super(props);
@@ -107,9 +106,8 @@ export default class SelectLanguage extends React.Component<IProps, IState> {
     const scrollView = this.scrollView.current;
 
     if (scrollView && ref) {
-      const cellDOMNode = ReactDOM.findDOMNode(ref);
-      if (cellDOMNode instanceof HTMLElement) {
-        scrollView.scrollToElement(cellDOMNode, 'middle');
+      if (ref instanceof HTMLElement) {
+        scrollView.scrollToElement(ref, 'middle');
       }
     }
   }
diff --git a/gui/src/renderer/components/SelectLocation.tsx b/gui/src/renderer/components/SelectLocation.tsx
index c42994b572..a8375a178c 100644
--- a/gui/src/renderer/components/SelectLocation.tsx
+++ b/gui/src/renderer/components/SelectLocation.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { IRelayLocationRedux } from '../redux/settings/reducers';
@@ -202,9 +201,8 @@ export default class SelectLocation extends React.Component<IProps> {
 
     if (scrollView) {
       if (ref) {
-        const cellDOMNode = ReactDOM.findDOMNode(ref);
-        if (cellDOMNode instanceof HTMLElement) {
-          scrollView.scrollToElement(cellDOMNode, 'middle');
+        if (ref instanceof HTMLElement) {
+          scrollView.scrollToElement(ref, 'middle');
         }
       } else {
         scrollView.scrollToTop();
diff --git a/gui/src/renderer/components/Selector.tsx b/gui/src/renderer/components/Selector.tsx
index 56390e8c7d..e7c1e8c0a1 100644
--- a/gui/src/renderer/components/Selector.tsx
+++ b/gui/src/renderer/components/Selector.tsx
@@ -15,7 +15,7 @@ interface ISelectorProps<T> {
   values: Array<ISelectorItem<T>>;
   value: T;
   onSelect: (value: T) => void;
-  selectedCellRef?: React.Ref<SelectorCell<T>>;
+  selectedCellRef?: React.Ref<HTMLButtonElement>;
   className?: string;
 }
 
@@ -34,7 +34,7 @@ export default class Selector<T> extends React.Component<ISelectorProps<T>> {
           value={item.value}
           selected={selected}
           disabled={item.disabled}
-          ref={selected ? this.props.selectedCellRef : undefined}
+          forwardedRef={selected ? this.props.selectedCellRef : undefined}
           onSelect={this.props.onSelect}>
           {item.label}
         </SelectorCell>
@@ -75,12 +75,14 @@ interface ISelectorCellProps<T> {
   disabled?: boolean;
   onSelect: (value: T) => void;
   children?: React.ReactText;
+  forwardedRef?: React.Ref<HTMLButtonElement>;
 }
 
-export class SelectorCell<T> extends React.Component<ISelectorCellProps<T>> {
+class SelectorCell<T> extends React.Component<ISelectorCellProps<T>> {
   public render() {
     return (
       <Cell.CellButton
+        ref={this.props.forwardedRef}
         onClick={this.onClick}
         selected={this.props.selected}
         disabled={this.props.disabled}