Search code examples
javascriptreactjsjsxbootstrap-5react-bootstrap

Why doesn't my dropdown from React Bootstrap close

I'm trying to use a dropdown menu from React-Bootstrap and can't make it work. It doesn't close (and it's not vertical, only if I use CSS with display: flex and flex-direction: column)(I'm using 2.10.7 version) :

enter image description here

It's inside a div. When i click a second time on i, it turns like this:

enter image description here

Here is the code:

function DropdownMenu() {
    return (
        <Dropdown>
            <Dropdown.Toggle className={styles.dropdowntoggle} variant="success" id="dropdown-basic">
                Dropdown Button
            </Dropdown.Toggle>

            <Dropdown.Menu>
                <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
            </Dropdown.Menu>
        </Dropdown>
    );
}

export default DropdownMenu;

The only css used is the background color on the Dropdown.Toggle.

I have tried using the simplified version. I've tried using onToggle and onClick with a "show" state, using the show prop. Doesn't work.

I've installed React Bootstrap and Bootstrap.

Edit: styles.dropdowntoggle is for the use of CSS on this component.

autoClose prop doesn't work either.

Solution

  • Make sure to import bootstrap

    import 'bootstrap/dist/css/bootstrap.min.css';

    You'll need to install in if you haven't

    npm install bootstrap

    If I use your code (and take out className={styles.dropdowntoggle} and import bootstrap like above, it looks like

    enter image description here

    Also

    className={styles.dropdowntoggle}

    should be

    style={styles.dropdowntoggle}

    or className="..."