UI Action Handler Changes, Misc Fixes

frontend/src/Components/Form/EnhancedSelectInput.css

@@ -55,11 +55,17 @@
   height: auto !important;
 }
 
-.optionsInnerModalBody {
-  composes: innerModalBody from 'Components/Modal/ModalBody.css';
+.optionsModalBody {
+  composes: modalBody from 'Components/Modal/ModalBody.css';
 
-  padding: 0;
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  padding: 10px 0;
+}
+
+.optionsModalScroller {
+  composes: scroller from 'Components/Scroller/Scroller.css';
   border: 1px solid $inputBorderColor;
   border-radius: 4px;
   background-color: $white;

frontend/src/Components/Form/EnhancedSelectInput.js

@@ -7,11 +7,12 @@ import TetherComponent from 'react-tether';
 import classNames from 'classnames';
 import isMobileUtil from 'Utilities/isMobile';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
-import { icons } from 'Helpers/Props';
+import { icons, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import Modal from 'Components/Modal/Modal';
 import ModalBody from 'Components/Modal/ModalBody';
+import Scroller from 'Components/Scroller/Scroller';
 import EnhancedSelectInputSelectedValue from './EnhancedSelectInputSelectedValue';
 import EnhancedSelectInputOption from './EnhancedSelectInputOption';
 import styles from './EnhancedSelectInput.css';
@@ -346,24 +347,28 @@ class EnhancedSelectInput extends Component {
               onModalClose={this.onOptionsModalClose}
             >
               <ModalBody
+                className={styles.optionsModalBody}
                 innerClassName={styles.optionsInnerModalBody}
+                scrollDirection={scrollDirections.NONE}
               >
-                {
-                  values.map((v, index) => {
-                    return (
-                      <OptionComponent
-                        key={v.key}
-                        id={v.key}
-                        isSelected={index === selectedIndex}
-                        {...v}
-                        isMobile={true}
-                        onSelect={this.onSelect}
-                      >
-                        {v.value}
-                      </OptionComponent>
-                    );
-                  })
-                }
+                <Scroller className={styles.optionsModalScroller}>
+                  {
+                    values.map((v, index) => {
+                      return (
+                        <OptionComponent
+                          key={v.key}
+                          id={v.key}
+                          isSelected={index === selectedIndex}
+                          {...v}
+                          isMobile={true}
+                          onSelect={this.onSelect}
+                        >
+                          {v.value}
+                        </OptionComponent>
+                      );
+                    })
+                  }
+                </Scroller>
               </ModalBody>
             </Modal>
         }