MALIN-642 fix: dropdownHeight for autocomplete

Author: Jaanesen

packages/react/src/formElements/MdAutocomplete.tsx

@@ -28,6 +28,7 @@ export interface MdAutocompleteProps {
   error?: boolean;
   errorText?: string;
   prefixIcon?: React.ReactNode;
+  dropdownHeight?: number;
 }
 
 const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
@@ -46,6 +47,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
       errorText,
       prefixIcon = null,
       onChange,
+      dropdownHeight,
       ...otherProps
     },
     ref,
@@ -204,6 +206,7 @@ const MdAutocomplete = React.forwardRef<HTMLInputElement, MdAutocompleteProps>(
               role="listbox"
               id={`md-autocomplete__dropdown_${autocompleteId}`}
               className="md-autocomplete__dropdown"
+              style={{ maxHeight: dropdownHeight && `${dropdownHeight}px` }}
             >
               {(autocompleteValue ? results : defaultOptions ? defaultOptions : options ? options : []).map(option => {
                 return (

stories/Autocomplete.stories.tsx

@@ -145,6 +145,17 @@ export default {
         },
       },
     },
+    dropdownHeight: {
+      type: { name: 'number' },
+      description: 'Set max height of dropdown in pixels',
+      table: {
+        defaultValue: { summary: 'variable' },
+        type: {
+          summary: 'number',
+        },
+      },
+      control: { type: 'number' },
+    },
     inputRef: {
       type: { name: 'Ref<HTMLButtonElement>' },
       description:
@@ -190,4 +201,5 @@ Autocomplete.args = {
   helpText: '',
   error: false,
   errorText: '',
+  dropdownHeight: null,
 };