NavbarCollapse closes when toggling a MegaMenuDropdown on mobile

オープン
  • 何か問題がありますか？
#1,686 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

@sarthak-11231 がすでに取り組んでいます。

2026年9月23日 から。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
58/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
静か
技術スタック
react, tailwindcss, typescript
領域
frontend

調査の方向性

packages/ui/src/components/Navbar/NavbarLink.tsx から始め、apps/web/examples/megaMenu/megaMenu.fullWidth.tsx を使って、文書化されているモバイル操作を再現します。提案されている2つのイベント処理の方向性を既存の Navbar のセマンティクスと比較し、ドロップダウンのトグルによって周囲の NavbarCollapse が折りたたまれなくなり、通常のリンクでは引き続き閉じることを確認します。

索引モデルが issue の本文から書いたものです。

説明

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

主要言語
TypeScript
スター
2.1k
フォーク
502
平均マージ
19時間 16分
マージ済み PR（30日）
2

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

themesberg/flowbite-react のほかの issue

themesberg/flowbite-react の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。