From c9bdf43a0d551171ee8eb69233831dc24cb09910 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 25 Apr 2019 21:47:29 -0700
Subject: [PATCH] Use Portal component in AutoSuggestInput

---
 .../src/Components/Form/AutoSuggestInput.js   | 100 ++++++++----------
 .../Components/Form/EnhancedSelectInput.js    |  34 +++---
 2 files changed, 60 insertions(+), 74 deletions(-)

diff --git a/frontend/src/Components/Form/AutoSuggestInput.js b/frontend/src/Components/Form/AutoSuggestInput.js
index 29b525206..0fc8172ea 100644
--- a/frontend/src/Components/Form/AutoSuggestInput.js
+++ b/frontend/src/Components/Form/AutoSuggestInput.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 import Autosuggest from 'react-autosuggest';
 import { Manager, Popper, Reference } from 'react-popper';
 import classNames from 'classnames';
+import Portal from 'Components/Portal';
 import styles from './AutoSuggestInput.css';
 
 class AutoSuggestInput extends Component {
@@ -15,7 +15,6 @@ class AutoSuggestInput extends Component {
     super(props, context);
 
     this._scheduleUpdate = null;
-    this._node = document.getElementById('portal-root');
   }
 
   componentDidUpdate(prevProps) {
@@ -53,83 +52,68 @@ class AutoSuggestInput extends Component {
   }
 
   renderSuggestionsContainer = ({ containerProps, children }) => {
-    return ReactDOM.createPortal(
-      <Popper
-        placement='bottom-start'
-        modifiers={{
-          computeStyle: {
-            fn: this.onComputeStyle
-          },
-          flip: {
-            padding: this.props.minHeight
-          }
-        }}
-      >
-        {({ ref: popperRef, style, scheduleUpdate }) => {
-          this._scheduleUpdate = scheduleUpdate;
+    return (
+      <Portal>
+        <Popper
+          placement='bottom-start'
+          modifiers={{
+            computeMaxHeight: {
+              order: 851,
+              enabled: true,
+              fn: this.onComputeMaxHeight
+            },
+            flip: {
+              padding: this.props.minHeight
+            }
+          }}
+        >
+          {({ ref: popperRef, style, scheduleUpdate }) => {
+            this._scheduleUpdate = scheduleUpdate;
 
-          return (
-            <div
-              ref={popperRef}
-              style={style}
-              className={children ? styles.suggestionsContainerOpen : undefined}
-            >
+            return (
               <div
-                {...containerProps}
-                style={{
-                  maxHeight: style.maxHeight
-                }}
+                ref={popperRef}
+                style={style}
+                className={children ? styles.suggestionsContainerOpen : undefined}
               >
-                {children}
+                <div
+                  {...containerProps}
+                  style={{
+                    maxHeight: style.maxHeight
+                  }}
+                >
+                  {children}
+                </div>
               </div>
-            </div>
-          );
-        }}
-      </Popper>,
-      this._node
+            );
+          }}
+        </Popper>
+      </Portal>
     );
   }
 
   //
   // Listeners
 
-  onComputeStyle = (data) => {
-    const {
-      enforceMaxHeight,
-      maxHeight
-    } = this.props;
-
+  onComputeMaxHeight = (data) => {
     const {
       top,
       bottom,
-      left,
       width
     } = data.offsets.reference;
 
-    const popperHeight = data.offsets.popper.height;
     const windowHeight = window.innerHeight;
 
-    data.styles.top = 0;
-    data.styles.left = 0;
-    data.styles.width = width;
-    data.styles.willChange = 'transform';
-
-    if (data.placement === 'bottom-start') {
-      data.styles.transform = `translate3d(${left}px, ${bottom}px, 0)`;
-
-      if (enforceMaxHeight) {
-        data.styles.maxHeight = Math.min(maxHeight, windowHeight - bottom);
-      }
-    } else if (data.placement === 'top-start') {
-      data.styles.transform = `translate3d(${left}px, ${top-popperHeight}px, 0)`;
-
-      if (enforceMaxHeight) {
-        data.styles.maxHeight = Math.min(maxHeight, top);
-      }
+    if ((/^botton/).test(data.placement)) {
+      data.styles.maxHeight = windowHeight - bottom;
+    } else {
+      data.styles.maxHeight = top;
     }
 
+    data.styles.width = width;
+
     return data;
-  };
+  }
 
   onInputChange = (event, { newValue }) => {
     this.props.onChange({
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
index f980ab42a..62e72d4d9 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -115,6 +115,23 @@ class EnhancedSelectInput extends Component {
   //
   // Listeners
 
+  onComputeMaxHeight = (data) => {
+    const {
+      top,
+      bottom
+    } = data.offsets.reference;
+
+    const windowHeight = window.innerHeight;
+
+    if ((/^botton/).test(data.placement)) {
+      data.styles.maxHeight = windowHeight - bottom;
+    } else {
+      data.styles.maxHeight = top;
+    }
+
+    return data;
+  }
+
   onWindowClick = (event) => {
     const button = document.getElementById(this._buttonId);
     const options = document.getElementById(this._optionsId);
@@ -314,22 +331,7 @@ class EnhancedSelectInput extends Component {
                 computeMaxHeight: {
                   order: 851,
                   enabled: true,
-                  fn: (data) => {
-                    const {
-                      top,
-                      bottom
-                    } = data.offsets.reference;
-
-                    const windowHeight = window.innerHeight;
-
-                    if ((/^botton/).test(data.placement)) {
-                      data.styles.maxHeight = windowHeight - bottom - POPPER_PADDING;
-                    } else {
-                      data.styles.maxHeight = top - POPPER_PADDING;
-                    }
-
-                    return data;
-                  }
+                  fn: this.onComputeMaxHeight
                 }
               }}
             >