patternfly / patternfly/patternfly-react
Bug - [Menu] - Flyout stays open when hovering a disabled item
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- TypeScript
- Star
- 862
- Fork
- 392
- Merge trung bình
- 4 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 9
Mô tả
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
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu trong MenuItem.js, tập trung vào cách xử lý disabled và aria-disabled được mô tả trong issue, đồng thời kiểm tra hành vi CSS của các mục disabled. Tái hiện tương tác flyout với một mục disabled sau trigger của mục đó, sau đó xác minh rằng việc di chuyển lên một trong hai biến thể disabled sẽ đóng flyout giống như một mục không phải flyout.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 2/5
- Thời gian dự kiến
- 1-3 giờ
- Mức độ hoạt động
- Sôi nổi
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 78/100