How Can I Make React-bootstrap's Dropdown Open On Mouse Hover?

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.

Solution 1:

exportclassNavextendsReact.Component {

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

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

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

  render() {
    return (
       <Nav><NavDropdownonMouseEnter = {this.handleOpen }
          onMouseLeave = {this.handleClose }
          open={this.state.isOpen }
          noCaretid="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:

<NavDropdownrenderMenuOnMount={true}><NavDropdown.Itemhref="#">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">

Solution 5:

This seems like a hacky solution, but it was the easiest way to keep my app running after updating.

With the latest update the dropdown-menu isn't rendered until the button is clicked.

I've been using this in my css:

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

and added this to my component

componentDidMount() {
    // TODO: Fix so menu renders automatically w/out clickconst hiddenNavToggle = document.getElementById('navbar__hamburger_wrapper-hidden_click')
    hiddenNavToggle.click()
    hiddenNavToggle.click()
  }

I added a wrapping div with the given id just to click for this.

I'd love to hear another solution.

Share