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.

Answer 1

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 click
    const 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.

Answer 2

You could replicate this https://codepen.io/bsngr/pen/frDqh which uses the following JS

$('ul.nav li.dropdown').hover(function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
  $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});

Or alternatively you could install a plugin like this https://github.com/CWSpear/bootstrap-hover-dropdown

EDIT: Perfectly fine solutions to bootstrap but I noticed now you said its react and I havent used that before but I dont see why the js above wouldnt work even if it requires tweaking

Answer 3

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.

Answer 4

A much cleaner pure CSS solution here:

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

Answer 5

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>

Answer 6

It's as simple as that :)

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