themesberg / themesberg/flowbite-react

NavbarCollapse closes when toggling a MegaMenuDropdown on mobile

Open
#1,686 1 comment 0 reactions 0 assignees View on GitHub

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:

https://github.com/themesberg/flowbite-react/blob/main/packages/ui/src/components/Navbar/NavbarLink.tsx#L46-L49

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>
  1. Narrow the viewport so <NavbarToggle> is visible
  2. Click the navbar toggle to open the menu
  3. 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:

  1. Have NavbarLink skip setIsOpen(false) when the click originated from a nested interactive element (for example, when event.target is not the link itself). Fixes it centrally and keeps the "tapping a link closes the menu" behaviour intact.
  2. Call event.stopPropagation() in MegaMenuDropdownToggle. Narrower, but it would also swallow any onClick a 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.