Fixed: Misc UI Fixes

frontend/src/Components/Form/SelectInput.js

@@ -27,7 +27,9 @@ class SelectInput extends Component {
       values,
       isDisabled,
       hasError,
-      hasWarning
+      hasWarning,
+      autoFocus,
+      onBlur
     } = this.props;
 
     return (
@@ -41,7 +43,9 @@ class SelectInput extends Component {
         disabled={isDisabled}
         name={name}
         value={value}
+        autoFocus={autoFocus}
         onChange={this.onChange}
+        onBlur={onBlur}
       >
         {
           values.map((option) => {
@@ -76,13 +80,16 @@ SelectInput.propTypes = {
   isDisabled: PropTypes.bool,
   hasError: PropTypes.bool,
   hasWarning: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
+  autoFocus: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onBlur: PropTypes.func
 };
 
 SelectInput.defaultProps = {
   className: styles.select,
   disabledClassName: styles.isDisabled,
-  isDisabled: false
+  isDisabled: false,
+  autoFocus: false
 };
 
 export default SelectInput;

frontend/src/Components/Table/TablePager.css

@@ -53,6 +53,13 @@
   color: $disabledColor;
 }
 
+.pageSelect {
+  composes: select from 'Components/Form/SelectInput.css';
+
+  padding: 0 2px;
+  height: 25px;
+}
+
 @media only screen and (max-width: $breakpointSmall) {
   .pager {
     flex-wrap: wrap;

frontend/src/Components/Table/TablePager.js

@@ -33,6 +33,10 @@ class TablePager extends Component {
     this.props.onPageSelect(parseInt(page));
   }
 
+  onPageSelectBlur = () => {
+    this.setState({ isShowingPageSelect: false });
+  }
+
   //
   // Render
 
@@ -115,10 +119,13 @@ class TablePager extends Component {
               {
                 isShowingPageSelect &&
                   <SelectInput
+                    className={styles.pageSelect}
                     name="pageSelect"
                     value={page}
                     values={pages}
+                    autoFocus={true}
                     onChange={this.onPageSelect}
+                    onBlur={this.onPageSelectBlur}
                   />
               }
             </div>