From 0b49eba77a2057ba0cacd6d7ba45090b92a22318 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 25 Apr 2019 20:24:05 -0700
Subject: [PATCH] Fixed: Root folder selection scrolling

Fixes #3077
---
 .../Components/Form/EnhancedSelectInput.css   |  2 +
 .../Components/Form/EnhancedSelectInput.js    | 37 +++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/EnhancedSelectInput.css
index 8f0b9d0f4..774a63517 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/EnhancedSelectInput.css
@@ -45,6 +45,8 @@
 }
 
 .options {
+  composes: scroller from '~Components/Scroller/Scroller.css';
+
   border: 1px solid $inputBorderColor;
   border-radius: 4px;
   background-color: $white;
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
index f365bd62b..f980ab42a 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -18,6 +18,8 @@ import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue
 import EnhancedSelectInputOption from './EnhancedSelectInputOption';
 import styles from './EnhancedSelectInput.css';
 
+const POPPER_PADDING = 10;
+
 function isArrowKey(keyCode) {
   return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
 }
@@ -306,7 +308,31 @@ class EnhancedSelectInput extends Component {
             )}
           </Reference>
           <Portal>
-            <Popper placement="bottom-start">
+            <Popper
+              placement="bottom-start"
+              modifiers={{
+                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;
+                  }
+                }
+              }}
+            >
               {({ ref, style, scheduleUpdate }) => {
                 this._scheduleUpdate = scheduleUpdate;
 
@@ -322,7 +348,12 @@ class EnhancedSelectInput extends Component {
                   >
                     {
                       isOpen && !isMobile ?
-                        <div className={styles.options}>
+                        <Scroller
+                          className={styles.options}
+                          style={{
+                            maxHeight: style.maxHeight
+                          }}
+                        >
                           {
                             values.map((v, index) => {
                               return (
@@ -339,7 +370,7 @@ class EnhancedSelectInput extends Component {
                               );
                             })
                           }
-                        </div> :
+                        </Scroller> :
                         null
                     }
                   </div>