themesberg / themesberg/flowbite-react
NavbarCollapse closes when toggling a MegaMenuDropdown on mobile
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.1k
- Forks
- 506
- PR merge metrics
- No merged PRs in 30d
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Describe the bug
On mobile, opening a mega menu dropdown immediately closes the navbar menu around it.
NavbarLink closes the collapse on any click:
function handleClick(event: MouseEvent<HTMLAnchorElement>) {
setIsOpen(false);
onClick?.(event);
}
That handler is attached to the rendered element, including when as="span" is used purely as a wrapper. A <MegaMenuDropdownToggle> nested inside it bubbles its click straight into handleClick, so the dropdown opens and the surrounding <NavbarCollapse> collapses in the same click.
This affects the documented markup: megaMenu.fullWidth and the other mega menu examples all nest the toggle in <NavbarLink as="span">.
Steps to reproduce
<MegaMenu>
<NavbarToggle />
<NavbarCollapse>
<NavbarLink as="span">
<MegaMenuDropdownToggle>Company</MegaMenuDropdownToggle>
</NavbarLink>
</NavbarCollapse>
<MegaMenuDropdown className="hidden w-full">
<p>Company content</p>
</MegaMenuDropdown>
</MegaMenu>
- Narrow the viewport so
<NavbarToggle>is visible - Click the navbar toggle to open the menu
- Click "Company"
Current behavior
The dropdown opens, but <NavbarCollapse> gains hidden in the same click, so the menu closes underneath it.
Expected behavior
The navbar menu stays open while a mega menu dropdown is toggled.
Possible directions
Two options, and the choice is a maintainer call since it changes Navbar semantics:
- Have
NavbarLinkskipsetIsOpen(false)when the click originated from a nested interactive element (for example, whenevent.targetis not the link itself). Fixes it centrally and keeps the "tapping a link closes the menu" behaviour intact. - Call
event.stopPropagation()inMegaMenuDropdownToggle. Narrower, but it would also swallow anyonClicka consumer attached to an ancestor, so it seems like the worse trade.
Context
Found while reviewing #1685, which fixes multiple dropdowns in a single mega menu. Verified this reproduces on main at 85319bd independently of that PR, so it is filed separately. Happy to open a PR once there is a preferred direction.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with packages/ui/src/components/Navbar/NavbarLink.tsx and reproduce the documented mobile interaction using apps/web/examples/megaMenu/megaMenu.fullWidth.tsx. Compare the two proposed event-handling directions with the existing Navbar semantics and verify the dropdown toggle no longer collapses the surrounding NavbarCollapse while ordinary links still close it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100