Added fix for dropHeight in Select to use max height instead of heigh…

…t. (grommet#2570)

src/js/components/MaskedInput/__tests__/MaskedInput-test.js

@@ -50,7 +50,7 @@ describe('MaskedInput', () => {
       expect(onChange).not.toBeCalled();
       expect(onFocus).toBeCalled();
       done();
-    }, 50);
+    }, 100);
   });
 
   test('option via mouse', done => {
@@ -87,7 +87,7 @@ describe('MaskedInput', () => {
         expect.objectContaining({ target: { value: 'aa!' } }),
       );
       done();
-    }, 50);
+    }, 100);
   });
 
   test('option via keyboard', done => {
@@ -125,7 +125,7 @@ describe('MaskedInput', () => {
         expect.objectContaining({ target: { value: 'aa!' } }),
       );
       done();
-    }, 50);
+    }, 100);
   });
 
   test('next and previous without options', done => {
@@ -159,6 +159,6 @@ describe('MaskedInput', () => {
       expect(onChange).not.toBeCalled();
       expect(container.firstChild).toMatchSnapshot();
       done();
-    }, 50);
+    }, 100);
   });
 });

src/js/components/Select/SelectContainer.js

@@ -19,18 +19,7 @@ import { Text } from '../Text';
 import { TextInput } from '../TextInput';
 
 import { SelectOption } from './SelectOption';
-
-const ContainerBox = styled(Box)`
-  max-height: inherit;
-
-  /* IE11 hack to get drop contents to not overflow */
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    width: 100%;
-  }
-
-  ${props =>
-    props.theme.select.container && props.theme.select.container.extend};
-`;
+import { StyledContainer } from './StyledSelect';
 
 const OptionsBox = styled(Box)`
   scroll-behavior: smooth;
@@ -373,9 +362,10 @@ class SelectContainer extends Component {
         onDown={this.onNextOption}
         onKeyDown={onKeyDown}
       >
-        <ContainerBox
-          height={dropHeight}
+        <StyledContainer
+          as={Box}
           id={id ? `${id}__select-drop` : undefined}
+          dropHeight={dropHeight}
         >
           {onSearch && (
             <Box pad={!customSearchInput ? 'xsmall' : undefined} flex={false}>
@@ -453,7 +443,7 @@ class SelectContainer extends Component {
               </SelectOption>
             )}
           </OptionsBox>
-        </ContainerBox>
+        </StyledContainer>
       </Keyboard>
     );
   }

src/js/components/Select/StyledSelect.js

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { sizeStyle } from 'grommet-styles';
+
+export const StyledContainer = styled.div`
+  /* IE11 hack to get drop contents to not overflow */
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    width: 100%;
+  }
+
+  ${props =>
+    props.dropHeight
+      ? sizeStyle('max-height', props.dropHeight, props.theme)
+      : 'max-height: inherit;'};
+
+  ${props =>
+    props.theme.select.container && props.theme.select.container.extend};
+`;