Use Portal component in AutoSuggestInput

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,12 +52,15 @@ class AutoSuggestInput extends Component {
   }
 
   renderSuggestionsContainer = ({ containerProps, children }) => {
-    return ReactDOM.createPortal(
+    return (
+      <Portal>
         <Popper
           placement='bottom-start'
           modifiers={{
-          computeStyle: {
+            computeMaxHeight: {
-            fn: this.onComputeStyle
+              order: 851,
+              enabled: true,
+              fn: this.onComputeMaxHeight
             },
             flip: {
               padding: this.props.minHeight
@@ -85,51 +87,33 @@ class AutoSuggestInput extends Component {
               </div>
             );
           }}
-      </Popper>,
+        </Popper>
-      this._node
+      </Portal>
     );
   }
 
   //
   // Listeners
 
-  onComputeStyle = (data) => {
+  onComputeMaxHeight = (data) => {
-    const {
-      enforceMaxHeight,
-      maxHeight
-    } = this.props;
-
     const {
       top,
       bottom,
-      left,
       width
     } = data.offsets.reference;
 
-    const popperHeight = data.offsets.popper.height;
     const windowHeight = window.innerHeight;
 
-    data.styles.top = 0;
+    if ((/^botton/).test(data.placement)) {
-    data.styles.left = 0;
+      data.styles.maxHeight = windowHeight - bottom;
+    } else {
+      data.styles.maxHeight = top;
+    }
+
     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);
-      }
-    }
 
     return data;
-  };
+  }
 
   onInputChange = (event, { newValue }) => {
     this.props.onChange({

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) => {
+                  fn: this.onComputeMaxHeight
-                    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;
-                  }
                 }
               }}
             >