Scrollable drop down lists in react-bootstrap

Question

I am trying to create some simple birth date dropdowns and would like to have scroll bars on the dropdown lists with a fixed number of items shown. How can I do this with re

Answer 1

Here's a possible solution that will scale the max height of the element dynamically based on viewport height:

import React, { Component } from 'react'
import { Button, Dropdown, MenuItem } from 'react-bootstrap'

export default class CustomDropdown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
        };
    }
    toggle = () => {
        this.setState({ open: !this.state.open });
    }
    onToggle = (isOpen, e, source) => {
        //This closes the menu on toggling the dropdown or hitting esc.
        if (source.source === 'click' || source.source === 'rootClose') {
            this.toggle();
        }
    }

    render(){
        
 this.myRef = ref} className='CustomDropdown'>
            
                {this.props.myTitle ? this.props.myTitle : 'Click Me'}
                 
                
                    ... add menu items here
                
            
        
    }
}