React-Bootstrap dropdown not expanding

Question

I\'ve just started implementing React-Bootstrap in my site, but the NavDropdown component will not expand when clicking on it.

What I did: npm install -s react

Answer 1

This is most probably a bug in react-bootstrap. The menu is actually showing and hiding instantly. If you check the code for NavDropdown.js you will see it contains <Dropdown.Menu /> as a container which uses <RootCloseWrapper /> for handling the closing of the menu. If you put a break point in the render() method of the DropdownMenu.js you will see that the first time this <RootCloseWrapper> is rendered as disabled as it should be. When you click the dropdown menu item the <RootCloseWrapper> is rendered as enabled and adds event listeners for click event to close the menu.

The problem is that the same event is then immediately processed in the RootCloseWrapper and the rootClose is triggered which closes the menu right away.

To check that it works

If you click on some other link and then use Tab key to focus the dropdown menu item you can expand the menu with the space bar or down arrow key.

Answer 2

For me it was Bootstrap 4 with react-bootstrap. When you downgrade to Bootstrap 3.3.7 it works.

Answer 3

Be sure to install react-dom $ npm install --save react react-dom and import "render", that should get it working. It's a requirement according to React-Bootstrap Getting Started page

I'm currently using React-Bootstram in one of my projects, these are the imports that work for me:

import React, { Component } from 'react';
import ReactDOM, {render} from 'react-dom';
import PropTypes from 'prop-types';
import { Nav, Navbar, NavItem, MenuItem, NavDropdown, Modal, Jumbotron } from 'react-bootstrap';

I hope this helps.

Answer 4

Your code is working with create-react-app with these dependencies versions, maybe try to update :

"dependencies": {
    "react": "^16.1.1",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^16.1.1"
  }

Using the same css as your cdn link.

Btw avoid exporting your component twice (only use export default for a single component file)

Edit : you're using the same eventkey for 2 menu-item props maybe try to change this.

Answer 5

I have seen such a problem when using the context for the portal above the components tree:

<MyContext.Provider value={props}>
  {children}
  {ReactDOM.createPortal(
    <MyComponent />,
    document.body,
  )}
</MyContext.Provider>

I fixed it by creating a container for the portal:

<MyContext.Provider value={props}>
  {children}
  {ReactDOM.createPortal(
    <MyComponent />,
    document.getElementById('portal'),
  )}
</MyContext.Provider>