NavbarCollapse closes when toggling a MegaMenuDropdown on mobile
@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 重现文档中描述的移动端交互。将两种提出的事件处理方向与现有的 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:
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.
- 主要语言
- TypeScript
- 星标
- 2.1k
- 派生
- 502
- 平均合并
- 19 小时 16 分钟
- 30 天内合并 PR
- 2
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
themesberg/flowbite-react 的其他 Issue
-
fix(Carousel): can't give dynamic children to Carousel可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭:bug: bug
难度 2/5 1-3 小时 新手友好度 62/100
themesberg/flowbite-react#1469 · 1 条评论 ·
-
Pagination is broken if there is only one page可能已有人在做 @Mukilan1600 于 1020 天前认领。 未关闭:bug: bug confirmed good first issue
难度 2/5 1-3 小时 新手友好度 65/100
themesberg/flowbite-react#1048 · 7 条评论 · 1 个 reaction ·
-
:books: documentation help wanted
难度 5/5 一周以上 新手友好度 35/100
themesberg/flowbite-react#1696 · 2 条评论 ·
-
难度 5/5 一周以上 新手友好度 15/100
themesberg/flowbite-react#1693 ·
-
难度 3/5 1-2 天 新手友好度 48/100
themesberg/flowbite-react#1677 ·
查看 themesberg/flowbite-react 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 75/100
transitmatters/shutdown-tracker#155 ·
维护者通常 2 天内回复
-
bug triaged
难度 2/5 1-3 小时 新手友好度 76/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 65/100
维护者通常 1 天内回复
-
"Claude Code request is missing its initial user message" when the prompt starts with an image path未关闭
难度 2/5 1-3 小时 新手友好度 84/100
earendil-works/pi-claude-code#31 ·
维护者通常 8 天内回复
-
bug pending triage
难度 1/5 1 小时以内 新手友好度 92/100
privatenumber/cleye#48 ·