CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapreactjsweb
W.Chen
W.Chen

Reputation: 417

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.

    <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

Upvotes: 21

Views: 23910

Answers (9)

Xavier Lambros
Xavier Lambros

Reputation: 876

Another way

const HoverDropDown = ({ children, ...rest }) => {
   const [show, setShow] = useState(false);

   return (
      <NavDropdown {...rest} show={show} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
         {children}
      </NavDropdown>
   );
}

<Nav>
   <HoverDropDown id="language-switcher-container" title="Menu">
      <Dropdown.Item>Item 1</Dropdown.Item>
   </HoverDropDown>         
</Nav>

Upvotes: 0

manishie
manishie

Reputation: 5322

Inspired by Rei Dien's answer, here's how you could do this using React Hooks.

export const Menu = () => {
  const [menuOpen, toggleMenuOpen] = useState(false);

  return (
    <Dropdown
      onMouseEnter={() => {
        toggleMenuOpen(true);
      }}
      onMouseLeave={() => {
        toggleMenuOpen(false);
      }}
      show={menuOpen}
    >
      <Dropdown.Toggle>
        Menu
      </Dropdown.Toggle>

      <Dropdown.Menu>
        <Dropdown.Item href="#">Menu!!!</Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

Upvotes: 1

Siddharth Sogani
Siddharth Sogani

Reputation: 349

It's as simple as that :)

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

Upvotes: 1

ian ray
ian ray

Reputation: 141

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>

Upvotes: 3

Ye Cai
Ye Cai

Reputation: 25

base on the answer of @Rei Dien

   onMouseEnter = { this.handleOpen.bind(this) }
   onMouseLeave = { this.handleClose.bind(this) }

Upvotes: 0

Schalton
Schalton

Reputation: 3104

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.

Upvotes: 0

Gary Vernon Grubb
Gary Vernon Grubb

Reputation: 11215

A much cleaner pure CSS solution here:

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

Upvotes: 14

Rei Dien
Rei Dien

Reputation: 554

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.

Upvotes: 20

Dan
Dan

Reputation: 946

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

Upvotes: -2

Related Questions