How can I make react-bootstrap's Dropdown open on mouse hover?

Question

Ok the question is simple. I need to make the dropdown open when mouse hover rather than on click.

Currently my code is as follow.

    <Nav>
      <NavDropdown
        onMouseEnter = {()=> isOpen=true}
        open={isOpen}
        noCaret
        id="language-switcher-container"
      >
        <MenuItem>Only one Item</MenuItem>
      </NavDropdown>
    </Nav>

as you can see, I tried onMouseEnter but no effect. Can someone solve this issue? What attribute should I pass in to achive this.

The API page is here react-bootstrap API page

Solution 1

export class Nav extends React.Component {

  constructor(props) {
    super(props)
    this.state = { isOpen: false }
  }

  handleOpen = () => {
    this.setState({ isOpen: true })
  }

  handleClose = () => {
     this.setState({ isOpen: false })
  }

  render() {
    return (
       <Nav>
        <NavDropdown
          onMouseEnter = { this.handleOpen }
          onMouseLeave = { this.handleClose }
          open={ this.state.isOpen }
          noCaret
          id="language-switcher-container"
        >
          <MenuItem>Only one Item</MenuItem>
        </NavDropdown>
      </Nav>
    )
  }
}

Hope this solves your issue.

Solution 2

A much cleaner pure CSS solution here:

.dropdown:hover .dropdown-menu { display: block; }

Solution 3

Having just run into this issue myself, I found out you need both the bootstrap CSS and a parameter for react-bootstrap. Add the following CSS:

.dropdown:hover>.dropdown-menu {
  display: block;
}

Then you need to add the parameter renderMenuOnMount={true} for the child elements to render on load:

<NavDropdown renderMenuOnMount={true}>
  <NavDropdown.Item href="#">Item #1</NavDropdown.Item>
</NavDropdown>

Solution 4

It's as simple as that :)

<NavDropdown onMouseEnter={(e) => document.getElementById("idofthiselement").click()} onMouseLeave={(e) => document.getElementById("idofthiselement").click()} title="Others" id="idofthiselement">

View more solutions

Comments

[Rei Dien]

first if you need a component to re-render, you need to set a new state, or new props. you can achieve you goal by adding isOpen to state, and then call setState onMouseEnter

[W.Chen]

Yes, I adopted the exact same code as you suggest!! thanks for your help!

[W.Chen]

Thanks for your help, yes I'm using bootstrap thus do it this way might not be a good idea,

[Dan]

Like I say im not familiar with react, but I am with bootstrap. If you pop that code in your own js file and make sure you have a .dropdown-menu etc so that it works, then i dont see why it wouldnt be a good idea?

[W.Chen]

Thanks again, it works. I guess I need to change my mind from traditional frontend to state-controlled rendering technique.

[Foxhoundn]

Using jQuery to manipulate the DOM defeats the whole purpose of using React - a component library.

[rbtbar]

It shouldn't be the accepted answer. Just try to move the mouse over the dropdown-menu element - the dropdown is closed again.

[Gary Vernon Grubb]

@rbtbar, are you using nested menus? I have tested without nesting menus and it works fine. "react-bootstrap": "^0.32.4"

[HMR]

The prop open does not exist anymore, it has been renamed to show

[Schalton]

This doesn't work in newer versions, the dropdown isn't rendered until it's first click. You'd need to trigger the onclick before you could control via css

[waldrus]

This technique will open all dropdown menus on the page. How do you limit this to targeted one, specific, dropdown? Or to hover over multiple other dropdowns throughout the page?

[Adesh Kumar]

use the different state for different dropdowns