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-bootstrap

Added css to html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Created my Navigation component:

import React from 'react';
import PropTypes from 'prop-types';
import NavbarHeader from 'react-bootstrap/lib/NavbarHeader';
import NavItem from 'react-bootstrap/lib/NavItem';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import NavbarCollapse from 'react-bootstrap/lib/NavbarCollapse';
import NavbarBrand from 'react-bootstrap/lib/NavbarBrand';
import NavbarToggle from 'react-bootstrap/lib/NavbarToggle';
import NavDropdown from 'react-bootstrap/lib/NavDropdown';
import MenuItem from 'react-bootstrap/lib/MenuItem';

export class Header extends React.PureComponent {
  render() {
   return (
    <Navbar inverse collapseOnSelect>
    <NavbarHeader>
      <NavbarBrand>
        <a href="#">React-Bootstrap</a>
      </NavbarBrand>
      <NavbarToggle />
    </NavbarHeader>
    <NavbarCollapse>
      <Nav>
        <NavItem eventKey={1} href="#">Link</NavItem>
        <NavItem eventKey={2} href="#">Link</NavItem>
        <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
          <MenuItem eventKey={3.1}>Action</MenuItem>
          <MenuItem eventKey={3.2}>Another action</MenuItem>
          <MenuItem eventKey={3.3}>Something else here</MenuItem>
          <MenuItem divider />
          <MenuItem eventKey={3.3}>Separated link</MenuItem>
        </NavDropdown>
      </Nav>
      <Nav pullRight>
        <NavItem eventKey={1} href="#">Link Right</NavItem>
        <NavItem eventKey={2} href="#">Link Right</NavItem>
      </Nav>
        </NavbarCollapse>
      </Navbar>
    );
  }
}

export default Header;

The dropdown will not expand: Gyazo Screenshare - Dropdown not expanding A click is being registered when inspecting the elements: Gyazo Screenshare - rerendering in dom

Any ideas on how and why this error occurs?

Edit: I am currently running on React 16

EDIT 2: Here's the Github repo.
https://github.com/Hespen/PWA-bootstrap npm install && npm run development -> localhost:1337

It works just fine, here is a working codesandbox link https://codesandbox.io/s/z6x0jlxowl — Shubham Khatri, Nov 21 '17 at 06:31
Yeah, it could be a problem there, can you just create a gist of your code and maybe a codesandbox reproducing your issue, otherwise its really difficult to help — Shubham Khatri, Nov 21 '17 at 17:22
your code looks fine, its difficult to debug with a working code, if you can make a fiddle or plunker , would be helpful. — Sheelpriy, Nov 24 '17 at 05:45
https://github.com/Hespen/PWA-bootstrap I didn't get the same result in codesandbox. But this is a github clone — Hespen, Nov 26 '17 at 18:55
I couldn't get this building to test it. The only thing that I'd note is that none of the nav behavior styles seem to be triggering in the screenshare you made. Notice that the class on the navbarCollapse element is meant to say " in" when it expands, but in your screenshot, the styling doesn't seem to be changing. I'm sure you've made sure to fully deregister your service worker and refresh between tries? — Shammoo, Nov 27 '17 at 03:47
I did remove the SW on retries. Also I forgot to mention. Building works with `npm run development` Which shall build it on localhost:1337 — Hespen, Nov 27 '17 at 07:47

score 5 · Answer 1 · answered Nov 27 '17 at 14:16

5

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.

answered Nov 27 '17 at 14:16

vl4d1m1r4

1,688
12
21

Ah yes, it seems like using tab actually shows the dropdown menu. This isn't fixible from my side? This is actually a bug in react-bootstrap? – Hespen Nov 27 '17 at 15:12
If react-bootstrap works fine with create-react-app then it might be an issue with the combination of libraries you are using, especially if they provide some abstraction over events. I can look further later, but it would be best if someone from the react-bootstrap team has a look. – vl4d1m1r4 Nov 27 '17 at 15:29
In that case I'm just going to put an issue on the Github repo, to see if they can provide some feedback on it. Thanks for the insights! – Hespen Nov 27 '17 at 16:09
Upgrading react-bootstrap to 0.33.1 fixed this issue for me. – JohnnyHK Mar 04 '21 at 18:59

score 2 · Answer 2 · answered Nov 24 '17 at 15:08

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.

I've got a render on my index page. These imports don't fix the issue either :/ — Hespen, Nov 27 '17 at 11:21

Dyo · Answer 3 · 2017-11-27T11:53:02.650

1

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.

edited Nov 27 '17 at 11:53

answered Nov 27 '17 at 09:22

Dyo

4,429
1
15
30

This didn't seem to solve the issue. It's still not expanding – Hespen Nov 27 '17 at 11:17
Are you able to reproduce the issue with a simple create-react-app ? – Dyo Nov 27 '17 at 11:26
Nope, but I can't find the issue as to why it doesn't work outside a create react app. – Hespen Nov 27 '17 at 11:31
So we may need more details, can you add your package.json, it can be an issue with your babel config – Dyo Nov 27 '17 at 11:36
The github repo was already somewhere in the comments. I added it to the main question. https://github.com/Hespen/PWA-bootstrap -> `npm install && npm run development` -> `localhost:1337` – Hespen Nov 27 '17 at 11:53

score 1 · Answer 4 · answered Sep 15 '18 at 21:04

1

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

answered Sep 15 '18 at 21:04

DJ Burb

2,346
2
29
38

score 1 · Answer 5 · answered Nov 08 '20 at 15:34

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>

React-Bootstrap dropdown not expanding

5 Answers5

To check that it works

Linked