patternfly / patternfly/patternfly-react
Bug - [Menu] - Flyout stays open when hovering a disabled item
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 862
- 派生
- 392
- 平均合并
- 4 天 8 小时
- 30 天内合并 PR
- 9
描述
Describe the problem
In a Menu with containsFlyout, a flyout submenu stays open after the pointer moves from the flyout trigger onto a disabled item.
Hovering an enabled item without a flyout correctly calls setFlyoutRef(null). Disabled items never get that hover:
isDisabled:.pf-v6-c-menu__list-item.pf-m-disabledhaspointer-events: none, soonMouseOverdoes not fire.isAriaDisabled:MenuItemskipsonMouseOverwhenisAriaDisabledis true, sosetFlyoutRef(null)never runs.
How do you reproduce the problem?
- Open a Menu with
containsFlyout. - Include a flyout item, then a disabled item (
isDisabledorisAriaDisabled) immediately after it. - Hover the flyout item until the submenu opens.
- Move the pointer onto the disabled item.
Expected behavior
The flyout closes, same as hovering any other non-flyout item.
Is this issue blocking you?
No, however there is no workaround without avoiding hard-disabled items.
What is your environment?
-
OS: macOS
-
Browser: Chrome
-
Version: PatternFly React 6.6.0
What is your product and what release date are you targeting?
OpenShift Virtualization (kubevirt-plugin)
Any other information?
Seen in MenuItem.js: onMouseOver on the li is a no-op when isAriaDisabled is true. CSS: pointer-events: none on disabled list items.
https://github.com/user-attachments/assets/2b2aa70e-57ad-4ec5-97c2-2ccb8148bc8f
Jira Issue: PF-4613
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 MenuItem.js 开始,重点关注 issue 中描述的 disabled 和 aria-disabled 处理,并检查 disabled 项的 CSS 行为。使用其 trigger 之后的 disabled 项重现 flyout 交互,然后验证移动到任一 disabled 变体上时,flyout 会像对待非 flyout 项一样关闭。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 2/5
- 预计耗时
- 1-3 小时
- 活跃度
- 活跃
- 描述清晰度
- 描述清楚
- 新手友好度
- 78/100