patternfly / patternfly/patternfly-react
Bug - [Menu] - Flyout stays open when hovering a disabled item
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 862
- Forks
- 392
- Ø Merge
- 4 T. 8 Std.
- Gemergte PRs (30 T.)
- 9
Beschreibung
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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne in MenuItem.js, konzentriere dich auf die in diesem Issue beschriebene Behandlung von disabled und aria-disabled und untersuche das CSS-Verhalten von disabled-Elementen. Reproduziere die Flyout-Interaktion mit einem disabled-Element nach dessen Trigger und verifiziere anschließend, dass das Bewegen auf eine der beiden disabled-Varianten das Flyout genauso schließt wie bei einem Nicht-Flyout-Element.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 2/5
- Geschätzter Aufwand
- 1-3 Stunden
- Aktivitätsstatus
- Aktiv
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 78/100