patternfly / patternfly/patternfly-react
Bug - [Menu] - Flyout stays open when hovering a disabled item
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 862
- Forks
- 392
- Avg merge
- 4d 8h
- Merged PRs (30d)
- 9
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in MenuItem.js, focusing on the disabled and aria-disabled handling described in the issue, and inspect the disabled-item CSS behavior. Reproduce the flyout interaction with a disabled item after its trigger, then verify that moving onto either disabled variant closes the flyout just like a non-flyout item.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 78/100