Add max height to version picker menu

Author: davepagurek

client/components/Dropdown/DropdownMenu.jsx

@@ -8,7 +8,15 @@ import { DropdownWrapper } from '../Dropdown';
 
 const DropdownMenu = forwardRef(
   (
-    { children, anchor, 'aria-label': ariaLabel, align, className, classes },
+    {
+      children,
+      anchor,
+      'aria-label': ariaLabel,
+      align,
+      className,
+      classes,
+      maxHeight
+    },
     ref
   ) => {
     // Note: need to use a ref instead of a state to avoid stale closures.
@@ -32,7 +40,7 @@ const DropdownMenu = forwardRef(
       focusedRef.current = false;
       setTimeout(() => {
         if (!focusedRef.current) {
-          close();
+          // close();
         }
       }, 200);
     };
@@ -59,6 +67,7 @@ const DropdownMenu = forwardRef(
             }}
             onBlur={handleBlur}
             onFocus={handleFocus}
+            style={maxHeight && { maxHeight, overflowY: 'auto' }}
           >
             {children}
           </DropdownWrapper>
@@ -84,14 +93,16 @@ DropdownMenu.propTypes = {
   classes: PropTypes.shape({
     button: PropTypes.string,
     list: PropTypes.string
-  })
+  }),
+  maxHeight: PropTypes.string
 };
 
 DropdownMenu.defaultProps = {
   anchor: null,
   align: 'right',
   className: '',
-  classes: {}
+  classes: {},
+  maxHeight: undefined
 };
 
 export default DropdownMenu;

client/modules/IDE/components/VersionPicker.jsx

@@ -41,6 +41,7 @@ const VersionPicker = React.forwardRef(({ onChangeVersion }, ref) => {
         </span>
       }
       align="left"
+      maxHeight="50vh"
     >
       {p5Versions.map((version) => (
         <MenuItem key={version} onClick={() => dispatchReplaceVersion(version)}>