NavbarCollapse closes when toggling a MegaMenuDropdown on mobile

Abierto
  • ¿Algo no está bien?
#1,686 2 comentarios 0 reacciones 0 asignados Ver en GitHub

@sarthak-11231 ya está trabajando en esto.

Desde el 23/9/2026.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
58/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, tailwindcss, typescript
Área
frontend

Línea de trabajo

Comienza con packages/ui/src/components/Navbar/NavbarLink.tsx y reproduce la interacción móvil documentada usando apps/web/examples/megaMenu/megaMenu.fullWidth.tsx. Compara las dos direcciones propuestas para el manejo de eventos con la semántica existente de Navbar y verifica que el interruptor del desplegable ya no contraiga la NavbarCollapse que lo rodea, mientras que los enlaces normales siguen cerrándola.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

  • 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.

Lenguaje dominante
TypeScript
Estrellas
2.1k
Forks
502
Merge medio
19 h 16 min
PR fusionados (30 d)
2

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de themesberg/flowbite-react

Todos los issues de themesberg/flowbite-react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.