How to display React-Bootstrap's NavDropdown on Hover

Question

Related to this question, whose top answers no longer work. By default, the NavDropdown only appears when clicked on, however I need this dropdown to display on hover. I struggled loading 'React-Bootstrap' into stackoverflow to create a reproducible example, however here is a basic Navbar using react-bootstrap, that features my attempt to display the dropdown on hover:

const [isStatsOpen, setIsStatsOpen] = useState(true);

<Navbar>
    <Navbar.Brand>
        <Link to='/'>
            <img alt='company logo' src={My Logo} />
        </Link>
    </Navbar.Brand>

    <Navbar.Toggle aria-controls='basic-navbar-nav' />

    <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='mr-auto'>
            <NavDropdown title='Statistics'
                onMouseEnter={() => setIsStatsOpen(true)}
                onMouseLeave={() => setIsStatsOpen(false)}
                open={isStatsOpen}
            >
                <NavDropdown.Item as={Link} to='/stats/'> Stats 1</NavDropdown.Item>
                <NavDropdown.Item as={Link} to='/stats2/'>Stats 2</NavDropdown.Item>

            </NavDropdown>

        </Nav>

        <Nav className='ml-auto'>
            <DivisionSelect />
            <AppSelect />
        </Nav>
    </Navbar.Collapse >
</Navbar >

From the linked post above, there were 2 responses with 10+ votes, however neither of these solutions work. As it pointed out in one of the comments: 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.

After inspecting the page, I can confirm that this person is correct - there is no menu for which to display until after the NavDropdown has been clicked upon. Once clicked, the menu is there, and then the solutions from this other post do work. Given this as the case, how can I resolve this issue? Is it possible for my react component to automatically "click" the Navdropdowns on load, that way the menus will appear on hover?

Thanks!

Apostolos · Answer 1 · 2020-07-10T06:01:38.903

1

Does this help you? Old good vanilla javascript. I added an id at NavDropdown and called the old, classic document.getElementById method and then triggered the click event.

  useEffect(() => {
    document.getElementById("test").click();
  }, []);


          <NavDropdown
            id="test"
            title="Statistics"

https://codesandbox.io/s/react-bootstrap-demo-z36c5

edited Jul 10 '20 at 06:01

answered Jul 10 '20 at 04:15

Apostolos

10,033
5
24
39

This looks great, and your codesandbox works, however it seems in my application that the useEffect is triggering before the `DOM` has loaded, as I get an error that `document.getElementById("test")` returns null, and I console logged the `document` to see that the DOM hasn't loaded. – Canovice Jul 10 '20 at 18:41
It seems the issue of the DOM having not loaded [is not new](https://stackoverflow.com/questions/40256673/getelementbyid-in-react) – Canovice Jul 10 '20 at 18:44
1

Hacky and dirty solution but if you included it in a setTimeout of eg 1 second? – Apostolos Jul 10 '20 at 19:17
1

or then, the other solution would be a custom hook to check that component is mount, as I saw some examples at github – Apostolos Jul 10 '20 at 19:31

score 0 · Answer 2 · answered Jul 12 '20 at 06:06

0

In this link to the earlier version of the question, the highly voted answer that starts with export class Nav extends React.Component { does work, so long as the open prop is updated to show.

answered Jul 12 '20 at 06:06

Canovice

9,012
22
93
211

How to display React-Bootstrap's NavDropdown on Hover

2 Answers2