CODEWITHSUNDEEP
twitter-bootstrapreactjsreact-bootstrap
Hespen
Hespen

Reputation: 1452

React-Bootstrap dropdown not expanding

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

Upvotes: 10

Views: 10532

Answers (5)

Stepan Zasimenko
Stepan Zasimenko

Reputation: 11

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>

Upvotes: 1

DJ Burb
DJ Burb

Reputation: 2364

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

Upvotes: 1

vl4d1m1r4
vl4d1m1r4

Reputation: 1781

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.

Clicking on dropdown 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.

Same click processed in RootCloseWrapper

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.

Upvotes: 5

Dyo
Dyo

Reputation: 4464

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.

Upvotes: 1

Edwin Barahona
Edwin Barahona

Reputation: 189

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.

Upvotes: 2

Related Questions